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

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

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

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

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

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

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

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

Создавайте уведомления с помощью Notifications 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 без каких-либо дополнительных библиотек. Сервер построен с использованием пакета express npm на Node.js и использует пакет npm web-push для отправки уведомлений. Чтобы отправить информацию на сервер, клиент вызывает URL-адрес POST, предоставленный сервером.

Часть 1. Зарегистрируйте сервис-воркера и подпишитесь на Push

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

    Код клиента:

    navigator.serviceWorker.register('sw.js');
    
  2. Клиент запрашивает у пользователя разрешение на отправку уведомлений.

    Код клиента:

    Notification.requestPermission();
    
  3. Чтобы включить push-уведомления, сервис-воркер использует PushManager.subscribe() для создания принудительной подписки. При вызове 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-уведомления!

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