Обзор push-уведомлений

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

Кейс Баскс
Kayce Basques
Matt Gaunt

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

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

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

Примеры уведомлений на macOS и Android.
Примеры уведомлений на macOS и Android.

Push-сообщения и уведомления — это две отдельные, но взаимодополняющие технологии. Push — это технология отправки сообщений с вашего сервера пользователям, даже если они не используют ваш сайт. Уведомления — это технология отображения push-информации на устройстве пользователя. Возможно использовать уведомления без push-сообщений. Однажды также может стать возможным использование push-сообщений без уведомлений, отображаемых пользователем ( тихий push ), но в настоящее время браузеры не позволяют этого. На практике они обычно используются вместе. Нетехнический пользователь, вероятно, не поймет разницу между push-сообщениями и уведомлениями. В этой подборке, когда мы говорим push-уведомления, мы имеем в виду комбинацию push-сообщения с последующим отображением его в виде уведомления. Когда мы говорим push-сообщения, мы имеем в виду push-технологию как таковую. А когда мы говорим уведомления , мы имеем в виду уведомительную технологию как таковую.

Зачем использовать push-уведомления?

  • Для пользователей push-уведомления — это способ получать своевременную , актуальную и точную информацию.
  • Для вас (владельца сайта) push-уведомления — это способ повысить вовлеченность пользователей.

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

На высоком уровне ключевыми шагами по внедрению push-уведомлений являются:

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

Далее на этой странице эти шаги объясняются более подробно.

Получите разрешение на отправку push-уведомлений

Во-первых, ваш веб-сайт должен получить разрешение пользователя на отправку push-уведомлений. Это должно быть вызвано жестом пользователя, например, нажатием кнопки «Да» рядом с запросом Do you want to receive push notifications? . После этого подтверждения вызовите Notification.requestPermission() . Операционная система или браузер на устройстве пользователя, вероятно, представят некий пользовательский интерфейс для формального подтверждения того, что пользователь хочет согласиться на push-уведомления. Этот пользовательский интерфейс различается на разных платформах.

Подпишите клиента на push-уведомления

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

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

Получите разрешение на отправку push-сообщений. Получите PushSubscription. Отправьте PushSubscription на свой сервер.

Отправить push-сообщение

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

  • Какие данные включить в сообщение.
  • Какому клиенту отправить сообщение.
  • Инструкции о том, как push-сервис должен доставлять сообщение. Например, вы можете указать, что push-сервис должен прекратить попытки отправить сообщение через 10 минут.

Обычно вы делаете запрос протокола web push через сервер, который вы контролируете. Конечно, ваш сервер не должен сам создавать сырой запрос веб-сервиса. Существуют библиотеки, которые могут сделать это для вас, например, web-push-libs . Но базовый механизм — это запрос веб-сервиса через HTTP.

Ваш сервер отправляет запрос по протоколу web push в push-службу, а push-служба отправляет сообщение на устройство пользователя.

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

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

Однако вам необходимо убедиться, что вы отправляете запрос протокола web push в правильную службу push. Данные PushSubscription , которые браузер вернул вам во время процесса подписки, предоставляют эту информацию. Объект PushSubscription выглядит следующим образом:

{
  "endpoint": "https://fcm.googleapis.com/fcm/send/c1KrmpTuRm…",
  "expirationTime": null,
  "keys": {
    "p256dh": "BGyyVt9FFV…",
    "auth": "R9sidzkcdf…"
  }
}

Домен endpoint по сути является push-сервисом. Путь endpoint — это информация об идентификаторе клиента, которая помогает push-сервису точно определить, какому клиенту следует отправить сообщение.

keys используются для шифрования, которое поясняется далее.

Зашифровать push-сообщение

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

Подпишите ваши запросы на push-протоколы

Служба push-уведомлений позволяет предотвратить отправку сообщений вашим пользователям кем-либо еще. Технически вам не нужно этого делать, но самая простая реализация в Chrome требует этого. В Firefox это необязательно. Другие браузеры могут потребовать этого в будущем.

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

  • Вы генерируете закрытый и открытый ключ как одноразовую задачу. Комбинация закрытого и открытого ключа известна как ключи сервера приложений . Вы также можете увидеть их как ключи VAPID . VAPID — это спецификация, которая определяет этот процесс аутентификации.
  • Когда вы подписываете клиента на push-уведомления из вашего кода JavaScript, вы предоставляете свой открытый ключ. Когда push-сервис генерирует endpoint для устройства, он связывает предоставленный открытый ключ с endpoint .
  • Когда вы отправляете запрос по протоколу Web Push, вы подписываете некоторую информацию JSON своим закрытым ключом.
  • Когда служба push получает ваш запрос протокола web push, она использует сохраненный открытый ключ для аутентификации подписанной информации. Если подпись действительна, служба push знает, что запрос пришел с сервера с соответствующим закрытым ключом.

Настройте доставку push-сообщения

Спецификация запроса протокола web push также определяет параметры, которые позволяют вам настроить, как служба push пытается отправить push-сообщение клиенту. Например, вы можете настроить:

  • Время жизни (TTL) сообщения, определяющее, как долго служба push-уведомлений должна пытаться доставить сообщение.
  • Срочность сообщения, которая полезна в случае, если служба push-уведомлений экономит заряд батареи клиента, доставляя только высокоприоритетные сообщения.
  • Тема сообщения, которая заменяет все ожидающие сообщения той же темы последним сообщением.

Получать и отображать отправленные сообщения в виде уведомлений

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

  1. Клиент подключается к сети, и push-сервис доставляет push-сообщение.
  2. Срок действия сообщения истек.

Когда клиентский браузер получает push-сообщение, он расшифровывает данные push-сообщения и отправляет push -событие вашему service worker . Service worker — это, по сути, код JavaScript, который может работать в фоновом режиме, даже если ваш веб-сайт не открыт или браузер закрыт. В обработчике push -событий вашего service worker вы вызываете ServiceWorkerRegistration.showNotification() , чтобы отобразить информацию в виде уведомления.

Сообщение приходит на устройство. Браузер пробуждает service worker. Push-событие отправляется.

Куда идти дальше

Лаборатории кода