Прежде чем перейти к 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-сообщения этому пользователю.
Шаг 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-сообщению имя «темы», которое заменит любое ожидающее сообщение этим новым сообщением.
Шаг 3. Отправьте событие на устройство пользователя.
После того как мы отправили push-сообщение, служба push-уведомлений будет хранить ваше сообщение на своем сервере до тех пор, пока не произойдет одно из следующих событий:
- Устройство подключается к сети, и служба push доставляет сообщение.
- Срок действия сообщения истекает. В этом случае служба push-уведомлений удаляет сообщение из своей очереди и оно никогда не будет доставлено.
Когда служба push-уведомлений доставляет сообщение, браузер получит сообщение, расшифрует все данные и отправит событие push
в ваш сервис-воркер.
Сервис-воркер — это «специальный» файл JavaScript. Браузер может выполнить этот JavaScript без открытия вашей страницы. Он может даже выполнить этот JavaScript, когда браузер закрыт. У сервис-воркера также есть API, такие как push, которые недоступны на веб-странице (т. е. API, которые недоступны из сценария сервис-воркера).
Внутри события «push» сервис-воркера вы можете выполнять любые фоновые задачи. Вы можете совершать аналитические вызовы, кэшировать страницы в автономном режиме и показывать уведомления.
Вот и весь поток push-сообщений.
Куда идти дальше
- Обзор веб-push-уведомлений
- Как работает Push
- Подписка пользователя
- Разрешение UX
- Отправка сообщений с помощью библиотек Web Push
- Веб-пуш-протокол
- Обработка push-событий
- Отображение уведомления
- Поведение уведомлений
- Общие шаблоны уведомлений
- Часто задаваемые вопросы по push-уведомлениям
- Распространенные проблемы и сообщения об ошибках