Эта страница переведена с помощью Cloud Translation API.

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

Matt Gaunt

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

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

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

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

Шаг 1: Клиентская часть

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

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

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

Все это делается на JavaScript с помощью Push API .

Поддержка браузера

Источник

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

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

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

Убедитесь, что вы отправили PushSubscription на свой сервер.

Шаг 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 — протокол Web Push . Это стандарт IETF, который определяет, как вы выполняете вызов API к службе push-уведомлений.

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

Что может API?

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

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

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

В инструкции указаны такие детали, как:

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

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

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

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

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

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

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

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

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

Вот и весь поток push-сообщений.