Поделиться через

Повторное вовлечение пользователей с помощью push-сообщений

  • Статья

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

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

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

Чтобы создать PWA, поддерживающий push-уведомления, выполните следующие действия.

  1. Запросите разрешение пользователя на получение push-уведомлений в клиентском коде PWA.
  2. Подпишитесь на push-сообщения сервера.
  3. Отправка push-сообщений из серверного кода PWA.
  4. Отображение уведомлений при получении push-сообщений.

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

Прежде чем отправлять push-уведомления в PWA, необходимо запросить у пользователя разрешение на получение сообщений. Чтобы запросить разрешение, используйте API Notification.requestPermission в клиентском коде, например, когда пользователь нажимает кнопку:

button.addEventListener("click", () => {
  Notification.requestPermission().then(permission => {
    if (permission === "granted") {
      console.log("The user accepted to receive notifications");
    }
  });
});

Состояние разрешения можно проверка позже:

if (Notification.permission === "granted") {
  console.log("The user already accepted");
}

Шаг 2. Подписка на push-уведомления

Чтобы получать push-события с сервера, подпишитесь на push-уведомления с помощью API push-уведомлений.

Перед созданием новой принудительной подписки Microsoft Edge проверяет, предоставил ли пользователь разрешение PWA на получение уведомлений.

Если пользователь не предоставил разрешение PWA на получение уведомлений, браузер запрашивает разрешение. Если пользователь не предоставляет разрешение браузеру, запрос на registration.pushManager.subscribe вызов вызывает DOMException.

В следующем фрагменте кода показано, как подписаться на push-уведомления в PWA:

async function subscribeToPushMessages() {
  const serviceWorkerRegistration = await navigator.serviceWorker.ready;

  // Check if the user has an existing subscription
  let pushSubscription = serviceWorkerRegistration.pushManager.getSubscription();
  if (pushSubscription) {
    // The user is already subscribed to push notifications
    return;
  }

  try {
    // Subscribe the user to push notifications
    pushSubscription = await serviceWorkerRegistration.pushManager.subscribe({
      userVisibleOnly: true,
      applicationServerKey: urlBase64ToUint8Array("YOUR PUBLIC VAPID KEY HERE")
    });
  } catch (err) {
    // The subscription wasn't successful.
    console.log("Error", err);
  }
}

// Utility function for browser interoperability
function urlBase64ToUint8Array(base64String) {
  var padding = '='.repeat((4 - base64String.length % 4) % 4);
  var base64 = (base64String + padding)
      .replace(/\-/g, '+')
      .replace(/_/g, '/');
  
  var rawData = window.atob(base64);
  var outputArray = new Uint8Array(rawData.length);
  
  for (var i = 0; i < rawData.length; ++i) {
    outputArray[i] = rawData.charCodeAt(i);
  }
  return outputArray;
}

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

Параметр userVisibleOnly конфигурации registration.pushManager.subscribe функции должен присутствовать и иметь значение true. Этот параметр указывает, что push-сообщение должно отображаться для пользователя. Microsoft Edge не поддерживает push-сообщения, которые не отображаются пользователю.

Шаг 3. Отправка push-сообщений с сервера

Приложению требуются ключи VAPID (добровольной идентификации сервера приложений) для отправки push-сообщений с сервера клиентам PWA. В Сети доступно несколько генераторов ключей VAPID (например, Vapidkeys.com).

Получив ключ VAPID, вы можете отправлять push-сообщения клиентам PWA с помощью протокола веб-отправки.

Вы можете использовать библиотеку для отправки push-сообщений с сервера в зависимости от используемого языка программирования. Например, можно использовать библиотеку веб-отправки , если сервер использует Node.js. Другие библиотеки доступны в репозитории библиотек WebPush.

Шаг 4. Отображение уведомлений при получении push-сообщений

После создания подписки в PWA (как показано в шаге 2. Подписка на push-уведомления) добавьте обработчик событий в рабочую push роль службы для обработки push-сообщений, отправляемых сервером.

В следующем фрагменте кода показано, как отображать уведомление при получении push-сообщения:

// Listen to push events.
self.addEventListener('push', event => {
  // Check if the user has granted permission to display notifications.
  if (Notification.permission === "granted") {
    // Get the notification data from the server.
    const notificationText = event.data.text();

    // Display a notification.
    const showNotificationPromise = self.registration.showNotification('Sample PWA', {
      body: notificationText,
      icon: 'images/icon512.png'
    });

    // Keep the service worker running until the notification is displayed.
    event.waitUntil(showNotificationPromise);
  }
});

Если PWA не отображает уведомление при получении push-сообщения, Microsoft Edge отображает универсальное уведомление, указывающее, что push-сообщение было получено.

См. также