Как работает push-уведомление

Matt Gaunt

Прежде чем перейти к 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.

Browser Support

• 42
• 17
• 44
• 16

Source

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

Ключи сервера приложений, также известные как ключи 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?

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

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

Что можно делать с помощью API?

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

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

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

В инструкциях указаны следующие сведения:

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

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

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

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

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

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

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

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

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

Вот и все, что нужно знать о push-уведомлениях.

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

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

Практические работы

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