Используйте push-уведомления для вовлечения и повторного вовлечения пользователей.

Кейт Джеффрис
Kate Jeffreys

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

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

Внешний вид уведомлений различается на разных платформах. Например:

Уведомление на устройстве Android.
Уведомление на MacBook.

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

Push-уведомления могут помочь пользователям максимально эффективно использовать ваше приложение, предлагая им повторно открыть его и использовать, основываясь на самой актуальной информации.

Создание и отправка уведомлений

Создавайте уведомления с помощью API уведомлений . Объект Notification содержит строковый title и объект options . Например:

let title = 'Hi!';
let options = {
  body: 'Very Important Message',
  /* other options can go here */
};
let notification = new Notification(title, options);

Когда уведомление активно, title отображается жирным шрифтом, а в body уведомления содержится дополнительный текст.

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

Для отображения уведомления ваше приложение должно получить разрешение от пользователя:

Notification.requestPermission();

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

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

  • Сервис-воркеры могут работать в фоновом режиме и отображать уведомления, даже когда ваше приложение не отображается на экране.

  • Технология push-уведомлений позволяет настроить сервер на отправку уведомлений в подходящее для вашего приложения время. Сервис push-уведомлений создает уникальные URL-адреса для каждого подписанного сервис-воркера. Отправка сообщений на URL-адрес сервис-воркера генерирует события на этом сервис-воркере, побуждая его отобразить уведомление.

В приведенном ниже примере клиент регистрирует сервис-воркер и подписывается на push-уведомления. Затем сервер отправляет уведомление на конечную точку подписки.

Клиент и сервис-воркер используют чистый JavaScript без дополнительных библиотек. Сервер построен на Node.js с использованием пакета express npm и использует пакет web-push npm для отправки уведомлений. Для отправки информации на сервер клиент отправляет POST-запрос на URL-адрес, предоставленный сервером.

Часть 1: Зарегистрируйте сервис-пользователя и подпишитесь на Push-уведомления.

  1. Клиентское приложение регистрирует сервис-воркер с помощью ServiceWorkerContainer.register() . Зарегистрированный сервис-воркер будет продолжать работать в фоновом режиме, когда клиентское приложение неактивно.

    Код клиента:

    navigator.serviceWorker.register('sw.js');

  2. Клиент запрашивает у пользователя разрешение на отправку уведомлений.

    Код клиента:

    Notification.requestPermission();

  3. Для включения push-уведомлений сервис-воркер использует PushManager.subscribe() для создания подписки на push-уведомления. В вызове PushManager.subscribe() сервис-воркер предоставляет ключ API приложения в качестве идентификатора.

    Код клиента:

    navigator.serviceWorker.register('sw.js').then(sw => {
  sw.pushManager.subscribe({ /* API key */ });
});

    Сервисы push-уведомлений, такие как Firebase Cloud Messaging, работают по модели подписки. Когда сервис-воркер подписывается на сервис push-уведомлений, вызывая метод PushManager.subscribe() , сервис создает уникальный для этого сервис-воркера URL-адрес. Этот URL-адрес называется конечной точкой подписки .

  4. Клиент отправляет конечную точку подписки на сервер приложений.

    Код клиента:

    navigator.serviceWorker.register('sw.js').then(sw => {
  sw.pushManager.subscribe({ /* API key */ }).then(subscription => {
    sendToServer(subscription, '/new-subscription', 'POST');
  });
});

    Код сервера:

    app.post('/new-subscription', (request, response) => {
  // extract subscription from request
  // send 'OK' response
});

Часть 2: Отправка уведомления

  1. Веб-сервер отправляет уведомление на конечную точку подписки.

    Код сервера:

    const webpush = require('web-push');

let options = { /* config info for cloud messaging and API key */ };
let subscription = { /* subscription created in Part 1*/ };
let payload = { /* notification */ };

webpush.sendNotification(subscription, payload, options);

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

    Код сервис-воркера:

    self.addEventListener('push', (event) => {
  let title = { /* get notification title from event data */ }
  let options = { /* get notification options from event data */ }
  showNotification(title, options);
})

  3. Пользователь взаимодействует с уведомлением, активируя веб-приложение, если оно еще не было активировано.

Следующие шаги

В качестве следующего шага внедрите push-уведомления!

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