Envolva novamente os usuários com mensagens por push

As mensagens por push são um canal de comunicação útil que permite que os aplicativos atualizem seus usuários com conteúdo relevante e oportuno. As mensagens por push podem ser usadas para envolver novamente os usuários com seu aplicativo.

Uma das vantagens mais significativas das mensagens por push é que elas podem ser entregues pelo servidor do seu aplicativo mesmo quando o usuário não está usando ativamente seu aplicativo.

As notificações por mensagem push participam do centro de notificações do sistema e podem exibir imagens e informações de texto. As notificações são úteis para alertar o usuário sobre atualizações importantes no seu aplicativo. No entanto, as notificações devem ser usadas raramente, pois tendem a atrapalhar o fluxo de trabalho do usuário.

Para criar um PWA que dê suporte a notificações por push:

  1. Solicite a permissão do usuário para receber notificações por push no código do lado do cliente do seu PWA.
  2. Assine as mensagens por push do servidor.
  3. Envie mensagens por push do código do lado do servidor do seu PWA.
  4. Exibir notificações quando mensagens push forem recebidas.

Etapa 1 - Solicitar a permissão do usuário para receber notificações por push

Antes de enviar notificações por push para o PWA, você deve solicitar permissão do usuário para receber mensagens. Para solicitar permissão, use a API Notification.requestPermission em seu código do lado do cliente, como quando o usuário clica em um botão:

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

Você poderá marcar o status da permissão novamente mais tarde:

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

Etapa 2 - Assinar notificações por push

Para receber eventos de push do servidor, assine as notificações por push usando a API de push.

Antes de uma nova assinatura push ser criada, o Microsoft Edge verifica se o usuário concedeu permissão ao PWA para receber notificações.

Se o usuário não tiver concedido permissão ao PWA para receber notificações, o usuário será solicitado pelo navegador para obter permissão. Se o usuário não conceder permissão ao navegador, a solicitação registration.pushManager.subscribe gerará um DOMExceptionarquivo .

O trecho de código a seguir mostra como assinar notificações por push em seu 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;
}

A chave VAPID mencionada no trecho de código anterior é uma chave pública usada para identificar o servidor que envia as mensagens por push e criptografar o conteúdo da mensagem por push. Consulte Etapa 3 - Enviar mensagens por push de seu servidor para obter mais informações sobre chaves VAPID.

A userVisibleOnly opção de configuração da registration.pushManager.subscribe função deve estar presente e definida como true. Essa opção indica que a mensagem por push deve ser exibida para o usuário. O Microsoft Edge não dá suporte a mensagens por push que não são exibidas para o usuário.

Etapa 3 - Enviar mensagens por push do servidor

Seu aplicativo precisa de chaves VAPID (Voluntary Application Server Identification) para enviar mensagens de push do servidor para seus clientes PWA. Existem vários geradores de chaves VAPID disponíveis online (por exemplo, Vapidkeys.com).

Depois de ter uma chave VAPID, você pode enviar mensagens de push para seus clientes PWA usando o protocolo Web Push. Consulte Push API no MDN.

Você pode usar uma biblioteca para enviar mensagens push do servidor, dependendo da linguagem de programação usada. Por exemplo, você poderá usar a biblioteca web-push se o servidor usar Node.js. Outras bibliotecas estão disponíveis no repositório de bibliotecas WebPush.

Etapa 4 - Exibir notificações quando mensagens por push forem recebidas

Depois que uma assinatura for criada em seu PWA (como mostrado na Etapa 2 – Assinar notificações por push), adicione um manipulador de push eventos em seu trabalho de serviço para lidar com mensagens por push enviadas pelo seu servidor.

O trecho de código a seguir mostra como exibir uma notificação quando uma mensagem de push é recebida:

// 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);
  }
});

Se o PWA não exibir uma notificação quando uma mensagem por push for recebida, o Microsoft Edge exibirá uma notificação genérica que indica que uma mensagem por push foi recebida.

Confira também

MDN:

GitHub:

Externo:

  • Last updated on