Compartilhar via

Voltar a envolver os utilizadores com mensagens push

As mensagens push são um canal de comunicação útil que permite que as aplicações atualizem os seus utilizadores com conteúdo relevante e oportuno. As mensagens push podem ser utilizadas para interagir novamente com os utilizadores com a sua aplicação.

Uma das vantagens mais significativas das mensagens push é que podem ser entregues pelo servidor da sua aplicação, mesmo quando o utilizador não está a utilizar ativamente a sua aplicação.

As notificações de mensagens push participam no centro de notificações do sistema e podem apresentar imagens e informações de texto. As notificações são úteis para alertar o utilizador sobre atualizações importantes na sua aplicação. No entanto, as notificações devem ser utilizadas raramente, uma vez que tendem a ser disruptivas para o fluxo de trabalho do utilizador.

Para criar um PWA que suporte notificações push:

  1. Peça a permissão do utilizador para receber notificações push no código do lado do cliente do seu PWA.
  2. Subscreva as mensagens push do servidor.
  3. Envie mensagens push a partir do código do lado do servidor do seu PWA.
  4. Apresentar notificações quando as mensagens push são recebidas.

Passo 1 – Pedir a permissão do utilizador para receber notificações push

Antes de poder enviar notificações push para o seu PWA, tem de pedir permissão ao utilizador para receber mensagens. Para pedir permissão, utilize a API Notification.requestPermission no código do lado do cliente, como quando o utilizador clica num botão:

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

Pode marcar a permissão status novamente mais tarde:

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

Passo 2 – Subscrever notificações push

Para receber eventos push do servidor, subscreva as notificações push com a API Push.

Antes de criar uma nova subscrição push, o Microsoft Edge verifica se o utilizador concedeu a permissão do PWA para receber notificações.

Se o utilizador não tiver concedido permissão ao PWA para receber notificações, o utilizador é solicitado pelo browser para obter permissão. Se o utilizador não conceder permissão ao browser, o pedido para registration.pushManager.subscribe emitir um DOMException.

O fragmento de código seguinte mostra como subscrever notificações push no 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 fragmento de código anterior é uma chave pública utilizada para identificar o servidor que envia as mensagens push e encripta o payload de mensagens push. Consulte o Passo 3 – Enviar mensagens push a partir do servidor para obter mais informações sobre chaves VAPID.

A userVisibleOnly opção de configuração da registration.pushManager.subscribe função tem de estar presente e definida como true. Esta opção indica que a mensagem push tem de ser apresentada ao utilizador. O Microsoft Edge não suporta mensagens push que não são apresentadas ao utilizador.

Passo 3 – Enviar mensagens push a partir do servidor

A sua aplicação precisa de chaves VAPID (Identificação Voluntária do Servidor de Aplicações) para enviar mensagens push do servidor para os seus clientes PWA. Existem vários geradores de chaves VAPID disponíveis online (por exemplo, Vapidkeys.com).

Assim que tiver uma chave VAPID, pode enviar mensagens push para os seus clientes PWA através do protocolo Web Push. Veja API Push no MDN.

Pode utilizar uma biblioteca para enviar mensagens push a partir do servidor, consoante a linguagem de programação que utilizar. Por exemplo, pode utilizar a biblioteca web-push se o servidor utilizar Node.js. Estão disponíveis outras bibliotecas no repositório de bibliotecas WebPush.

Passo 4 – Apresentar notificações quando as mensagens push são recebidas

Depois de criar uma subscrição no seu PWA (conforme mostrado no Passo 2 – Subscrever notificações push), adicione um push processador de eventos na sua função de trabalho de serviço para processar mensagens push que são enviadas pelo servidor.

O fragmento de código seguinte mostra como apresentar uma notificação quando uma mensagem 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 seu PWA não apresentar uma notificação quando uma mensagem push é recebida, o Microsoft Edge apresenta uma notificação genérica que indica que foi recebida uma mensagem push.

Confira também

MDN:

GitHub:

Externo:

  • Last updated on