Partilhar via

Reengaja os usuários com mensagens push

  • Artigo

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

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

As notificações por mensagem por push participam da central de notificação do sistema e podem exibir imagens e informações de texto. As notificações são úteis para alertar o usuário sobre uma atualização importante em seu aplicativo. No entanto, as notificações raramente devem ser usadas, pois tendem a ser disruptivas para 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 push do servidor.
  3. Envie mensagens push do código do lado do servidor do seu PWA.
  4. Exiba notificações quando as mensagens por 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 sua PWA, você deve solicitar permissão do usuário para receber mensagens. Para solicitar permissão, use a API Notification.requestPermission no código do lado do cliente, como quando o usuário clicar em um botão:

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

Você pode marcar a permissão status novamente mais tarde:

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

Etapa 2 – Assinar notificações por push

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

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

Se o usuário não tiver concedido a permissão 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 para registration.pushManager.subscribe lançar um DOMException.

O snippet 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 snippet de código anterior é uma chave pública usada para identificar o servidor que envia as mensagens de push e criptografar o conteúdo da mensagem push. Consulte Etapa 3 – Enviar mensagens por push do 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 push deve ser exibida para o usuário. O Microsoft Edge não dá suporte a mensagens 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 (Identificação Voluntária do Servidor de Aplicativo) para enviar mensagens de push do servidor para seus clientes PWA. Há vários geradores de chaves VAPID disponíveis online (por exemplo, Vapidkeys.com).

Depois de ter uma chave VAPID, você pode enviar mensagens push para seus clientes PWA usando o Protocolo de Push da Web.

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

Etapa 4 – Exibir notificações quando as mensagens push são recebidas

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

O snippet 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 push foi recebida.

Confira também