PWA и Push-уведомления

PWA (Progressive Web App) — это web-приложение, которое пользователь может установить на устройство с сайта. После установки PWA открывается как отдельное приложение, может работать с кэшем, использовать Service Worker и получать push-уведомления.

к сведению

PWA не является отдельным каналом коммуникации в Altcraft. Это сценарий использования Web Push для установленного web-приложения.

Настройка push-уведомлений для PWA

Настройка push-уведомлений для PWA не отличается от настройки обычного Web Push. Порядок действий тот же:

Настройте ресурс и сайт — ресурс, Toolkit, SDK, код подписки
Настройте провайдеров — Firebase для Android, APNs для iOS

Единственное отличие — размещённый на сайте manifest.json должен быть содержать параметры, которые позволяют браузеру установить сайт как приложение.

Manifest для PWA

Manifest — это JSON-файл, который сообщает браузеру, как приложение должно называться, какие иконки использовать, как открываться и отображаться после установки.

Для работы PWA в манифесте должны быть заданы:

name — полное название приложения
short_name — короткое название, отображаемое рядом с иконкой на экране «Домой»
start_url — страница, которая открывается при запуске PWA
display — режим отображения; для PWA используется standalone (открытие без адресной строки браузера)
icons — иконки приложения; для установки на Android нужны иконки 192×192 и 512×512. Файлы иконок обязательно должны присутствовать по указанному пути.

Минимальный пример:

{
  "name": "Example App",
  "short_name": "Example",
  "start_url": "/",
  "scope": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#ffffff",
  "icons": [
    {
      "src": "/icons/icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

После создания файла манифеста его нужно подключить в <head> файла каждой страницы сайта. Без этой строки браузер не найдет манифест и не сможет установить сайт как PWA. Убедитесь, что путь до manifest.json указан корректно:

<link rel="manifest" href="/manifest.json">

подсказка

Файл manifest.json предоставляется в загрузочных файлах и Toolkit при настройке ресурса в Altcraft. Для работы PWA его нужно дополнить параметрами name, short_name, display и icons.

Особенности Android

На Android PWA Push работает через стандартную Web Push-инфраструктуру браузера. Поддерживается в Chrome, Samsung Internet и других Chromium-браузерах.

Условия работы:

PWA должно быть установлено на устройство;
используется Firebase Cloud Messaging в качестве провайдера;
манифест должен содержать иконки 192×192 и 512×512 пикселей;
уведомления отображаются в системном центре уведомлений Android.

Подробная настройка Firebase описана в статье Firebase Cloud Messaging.

Особенности iOS и Safari

Начиная с iOS/iPadOS 16.4, установленные web-приложения могут получать push-уведомления. Пользователь должен добавить PWA на экран «Домой» и разрешить уведомления.

Ограничения:

PWA должно быть добавлено на экран «Домой»;
уведомления работают через APNs;
пользователь должен явно разрешить уведомления;
настройки и сертификаты связаны с Apple Developer Account;
поведение может отличаться от Android и desktop-браузеров.

Подробная настройка для Safari описана в статье Apple Safari.

Настройка push-уведомлений для PWA​

Manifest для PWA​

Особенности Android​

Особенности iOS и Safari​

Настройка push-уведомлений для PWA

Manifest для PWA

Особенности Android

Особенности iOS и Safari