312

Push Notifications

Что такое push-уведомления?

Push-уведомление – это короткие сообщения, всплывающие на экране компьютера или мобильного телефона с различной информацией поверх любых открытых окон. ("PushManager" in window)

Notification (уведомление) - это тоже короткие всплывающие сообщения, но инициализированное из кода открытой страницы. ("Notification" in window)

Push-уведомление и Notification — это две отдельные, но взаимодополняющие технологии.

Пример уведомления

Как это работает?

Три ключевых шага для реализации push-уведомлений:

  1. Добавление логики на стороне клиента для подписки пользователя на отправку сообщений.
  2. Вызов API из вашей серверной части/приложения, который отправляет push-уведомление на устройство пользователя.
  3. Файл service worker’а, который получит событие «push», когда push-уведомление поступит на устройство.

Более подробная схема

Шаг 1: Клиентская часть Необходимо получить разрешение от пользователя на отправку ему push-уведомление, для этого вызываем метод Notification.requestPermission() , для сафари - window.safari.pushNotification.requestPermission()

Пример запроса

Регистрируем сервис-воркер, подписываемся на уведомления.

const publicVapidKey = "BD-xkyjqdwCWjStuK2b7MXm5XZI7FgFoYLwvqe8i1gxTsRCIlpXM9i3zC3DhVn95RIrffNnR4hmqo7ZYmkyxtAo";

const register = await navigator.serviceWorker.register('./service-worker.js', {
    scope: '/'
});

const pushSubscription = await register.pushManager.subscribe({
    userVisibleOnly: true,
    applicationServerKey: publicVapidKey,
});

Далее нужно будет отправить данные pushSubscription на свой бэкэнд/сервер. На своем сервере вы сохраните эту подписку в базе данных и будете использовать ее для отправки push-сообщения этому пользователю.

PushSubscription содержит всю информацию, необходимую для отправки push-сообщения этому пользователю. Вы можете думать об этом как об идентификаторе устройства этого пользователя. Пример PushSubscription.

{
  "endpoint": "https://random-push-service.com/unique-id-1234/",
  "keys": {
    "p256dh" : "BNcRdreALRFXTkOOUHK1EtK2wtaz5Ry4YfYCA_0QTpQtUbVlUls0VJXg7A8u-Ts1XbjhazAkj7I99e8QcYP7DkM=",
    "auth"   : "tBHItJI5svbpez7KI4CCXg=="
  }
}

Перед подпиской пользователя вам необходимо сгенерировать набор «ключей сервера приложений».

Ключи сервера приложений, также известные как ключи VAPID, уникальны для вашего сервера. Они позволяют службе push-уведомлений узнать, какой сервер приложений подписался на пользователя, и гарантировать, что именно тот же сервер инициирует отправку push-сообщений этому пользователю.

Шаг 2. Отправляем push-уведомление Если вы хотите отправить push-сообщение своим пользователям, вам необходимо выполнить API-вызов push службы.

const webpush = require('web-push');
...
// pushSubscription был получен c frontend'а
const payload = JSON.stringify({ title: "Hello World!", body: "This is your first push notification!" });
webpush.sendNotification(pushSubscription, payload);

web-push - библиотека (java, JS, python, C#, PHP), которая скрывает детали реализации web push протокола.

Шаг 3. Отправляем событие на устройство пользователя. После того как мы отправили push-уведомление, служба push-уведомлений будет хранить ваше сообщение на своем сервере до тех пор, пока не произойдет одно из следующих событий:

Когда служба push-уведомлений доставляет сообщение, браузер получит сообщение, расшифрует все данные и отправит событие push уведомления в ваш сервис-воркер.

// service-worker.js

self.addEventListener('push', function(e) {
    const data = e.data.json();
    self.registration.showNotification(
        data.title,
        {
            body: data.body,
        }
    );
})

Что такое Web Push Protocol?

Это стандарт IETF, который определяет, как вы выполняете вызов API к службе push-уведомлений.

Когда мы подписываем пользователя, мы передаем applicationServerKey. Этот ключ передается службе push-уведомлений и используется для проверки того, что приложение, подписавшееся на пользователя, также является приложением, которое запускает push-сообщения.

Данные, которые вы отправляете с push-сообщением, должны быть зашифрованы, чтобы службы push-уведомлений не могли их просмотреть. Шифрование полезной нагрузки осуществляется с помощью данных, которые были получены от браузера в объекте PushSubscription. Подробнее можно почитать тут.

Что такое GCM?

При поиске туториалов или справочной информации о push-уведомлениях и Notifications, попадаются источники про GCM, которые сбивают с толку, особенно в самом начале изучения данной темы. Дело в том, что Chrome впервые реализовал веб-push в декабре 2014 года, Chrome использовал Google Cloud Messaging (GCM) для отправки push-сообщений с сервера в браузер. Это не был “настоящий” Web Push. Вот некоторые особенности:

В июле 2016 года появилась новая функция в Web Push — ключи сервера приложений (или VAPID, как известно из спецификации). Когда Chrome добавил поддержку этого нового API, он использовал Firebase Cloud Messaging (FCM) вместо GCM в качестве службы обмена сообщениями. Это важно по нескольким причинам:

Стоит отметить, что каждый браузер использует свою службу доставки уведомлений:

Почему Firebase?

Firebase Cloud Messaging (FCM) — это кроссплатформенное решение для обмена сообщениями, которое позволяет надежно отправлять сообщения бесплатно.

Firebase Cloud Messaging JS SDK выполняет несколько скрытых трюков, чтобы упростить реализацию веб-push:

Если рассматриваеть Web Push просто как службу push-уведомлений, то вы можете считать Firebase Messaging SDK библиотекой для упрощения реализации веб-push.

Некоторые ключевые возможности, которые дает FCM:

Safari

Для отправки push-уведомлений на устройства с Safari ниже версии 16.4 вам необходимо иметь аккаунт разработчика Apple.

Приблизительный список шагов для реализации push-уведомлений:

  1. Регистрируем Website Push ID через аккаунт разработчика.
  2. Запрашиваем сертификат в Связке ключей на MacOS.
  3. Генерируем сертификат через аккаунт разработчика.
  4. Закидываем сертификаты на сайт.
  5. Добавляем в наше приложение manifest.json, signature, website.json чтобы браузер разрешил получать push-уведомления.
  6. Получаем разрешение на push-уведомления.

Некоторые ключевые моменты:

Мобильные Push-уведомления

Веб-push-уведомления не могут быть отправлены пользователям, если их браузер не открыт.Мобильные push-уведомления отправляются непосредственно в операционную систему устройства (например, iOS, Android).

Android отправляет через службу push-уведомлений Google Firebase Cloud Messaging (FCM), iOS - Apple Push Notification service (APNs), Huawei - Huawei Push Kit.

iOS

По типу отправки push-уведомления делятся на локальные (Local Notifications) и удаленные (Remote Push Notifications). Для обоих типов уведомлений необходимо запросить у пользователя разрешение на их отправку.

Локальные уведомления могут быть активированы только датой, временем и местом. Чтобы обновить локальные уведомления (добавить новую логику, задать новые параметры, изменить дизайн или содержание), разработчик должен выпустить новую версию приложения. Поскольку удаленные уведомления отправляются через внешний сервер, у вас есть возможность вносить изменения в свои кампании без выпуска новой версии приложения.

Удаленные пуш-уведомления также имеют несколько модификаций - Предварительные уведомления (Provisional Messages) и Silent Push Notifications.

Android

Пользователи Android автоматически дают разрешение на отправку уведомлений при загрузке приложения. Также как и в iOS пуши на Android делятся на два типа по способу отправки - локальные и удаленные.

Поезная инфа из различных источников

vk tech

тоже vk tech

Полезные ссылки: