Как работает push

Прежде чем перейти к API, давайте рассмотрим процесс отправки данных (push) в общих чертах, от начала до конца. Затем, по мере того как мы будем рассматривать отдельные темы или API, у вас появится представление о том, как и почему это важно.

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

1. Добавление клиентской логики для подписки пользователя на push-уведомления (т.е. JavaScript и пользовательский интерфейс в вашем веб-приложении, которые регистрируют пользователя для получения push-уведомлений).
2. Вызов API из вашего бэкэнда/приложения, который запускает отправку push-уведомления на устройство пользователя.
3. JavaScript-файл сервис-воркера, который будет получать событие «push» при поступлении push-уведомления на устройство. Именно в этом JavaScript-коде вы сможете отобразить уведомление.

Давайте рассмотрим подробнее, что включает в себя каждый из этих шагов.

Шаг 1: На стороне клиента

Первый шаг — это «подписка» пользователя на push-уведомления.

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

Объект PushSubscription содержит всю необходимую информацию для отправки push-уведомлений этому пользователю. Можно рассматривать его как идентификатор устройства пользователя.

Всё это реализовано на JavaScript с использованием Push API .

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

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

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

Шаг 2: Отправьте push-уведомление

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

Вот некоторые вопросы, которые вы, возможно, задаёте себе:

• Что такое и кто такая служба push-уведомлений?
• Как выглядит API? В формате JSON, XML или каком-то другом?
• Что может делать API?

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

Сервис push-уведомлений получает сетевой запрос, проверяет его и отправляет push-сообщение в соответствующий браузер. Если браузер находится в автономном режиме, сообщение ставится в очередь до тех пор, пока браузер не подключится к сети.

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

Чтобы получить соответствующий URL-адрес для запуска push-уведомления (т.е. URL-адрес службы push-уведомлений), достаточно посмотреть значение endpoint в объекте PushSubscription .

Ниже приведён пример значений, которые вы получите от PushSubscription :

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

В данном случае конечной точкой является https://random-push-service.com/some-kind-of-unique-id-1234/v2/ . Сервис push-уведомлений будет называться 'random-push-service.com', и каждая конечная точка уникальна для каждого пользователя, что обозначается как 'some-kind-of-unique-id-1234'. По мере работы с push-уведомлениями вы заметите эту закономерность.

Ключевые моменты подписки будут рассмотрены позже.

Как выглядит API?

Я уже упоминал, что каждый сервис веб-push ожидает один и тот же вызов API. Этот API — протокол веб-push (Web Push Protocol ). Это стандарт IETF, определяющий, как следует обращаться к сервису веб-push через API.

Для выполнения вызова API необходимо установить определенные заголовки, а данные должны представлять собой поток байтов. Мы рассмотрим библиотеки, которые могут выполнить этот вызов API за нас, а также способы сделать это самостоятельно.

Что может делать API?

API предоставляет возможность отправлять сообщения пользователю, с данными или без них, а также инструкции по отправке сообщений.

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

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

В инструкции содержатся такие подробности, как:

• Время жизни push-сообщения. Этот параметр определяет, как долго сообщение должно находиться в очереди, прежде чем оно будет удалено и не будет доставлено.

• Укажите срочность сообщения. Это полезно в случае, если служба push-уведомлений экономит заряд батареи пользователя, доставляя только сообщения с высоким приоритетом.

• Присвойте push-уведомлению имя в формате "тема", которое заменит все ожидающие сообщения этим новым сообщением.

Шаг 3: Отправка события на устройство пользователя.

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

1. Устройство подключается к сети, и служба push-уведомлений доставляет сообщение.
2. Сообщение истекает. В этом случае служба push-уведомлений удаляет сообщение из своей очереди, и оно никогда не будет доставлено.

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

Сервис-воркер — это «специальный» JavaScript-файл. Браузер может выполнять этот JavaScript, даже если ваша страница не открыта. Он может выполнять этот JavaScript даже при закрытом браузере. Сервис-воркер также имеет API, такие как push-уведомления, которые недоступны на веб-странице (то есть API, недоступные из скрипта сервис-воркера).

В обработчике события 'push' сервис-воркера можно выполнять любые фоновые задачи. Можно отправлять запросы к аналитическим данным, кэшировать страницы в автономном режиме и показывать уведомления.

Вот и весь процесс отправки push-уведомлений.

Куда отправиться дальше?

• Обзор веб-push-уведомлений
• Как работает Push
• Регистрация пользователя
• Пользовательский интерфейс разрешений
• Отправка сообщений с помощью библиотек веб-push-уведомлений
• Протокол веб-push
• Обработка событий Push
• Отображение уведомления
• Поведение при получении уведомлений
• Типичные шаблоны уведомлений
• Часто задаваемые вопросы о push-уведомлениях
• Распространенные проблемы и сообщения об ошибках

Кодовые лаборатории

• Создайте клиент для push-уведомлений.
• Создайте сервер push-уведомлений