Codelab: criar um cliente de notificação push

Kate Jeffreys
Kate Jeffreys
Kayce Basques
Kayce Basques
X GitHub

Neste codelab, mostramos como criar um cliente de notificação push, etapa por etapa. Ao final do codelab, você terá um cliente que:

  • Inscreve o usuário nas notificações push.
  • Recebe mensagens push e as mostra como notificações.
  • Cancela a inscrição do usuário nas notificações push.

O foco deste codelab é ajudar você a aprender na prática, sem falar muito sobre conceitos. Confira Como as notificações push funcionam? para saber mais sobre os conceitos de notificações push.

O código do servidor deste codelab já está completo. Neste codelab, você vai implementar apenas o cliente. Para saber como implementar um servidor de notificações push, confira o Codelab: criar um servidor de notificações push.

Compatibilidade com navegadores

Este codelab funciona com as seguintes combinações de sistema operacional e navegador:

  • Windows: Chrome, Edge
  • macOS: Chrome, Firefox
  • Android: Chrome, Firefox

Este codelab não funciona com os seguintes sistemas operacionais (ou combinações de sistema operacional e navegador):

  • macOS: Brave, Edge, Safari
  • iOS

Configuração

Receber uma cópia editável do código

  • Clique em Remixar para editar e tornar o projeto editável.

Configurar a autenticação

Antes de receber notificações push, é necessário configurar o servidor e o cliente com chaves de autenticação. Consulte Assinar suas solicitações de protocolo push da Web para saber o motivo. Normalmente, você armazena secrets em um arquivo .env, semelhante a este.

VAPID_PUBLIC_KEY="BKiwTvD9HA…"
VAPID_PRIVATE_KEY="4mXG9jBUaU…"
VAPID_SUBJECT="mailto:test@test.test"
  • Abra public/index.js.
  • Substitua VAPID_PUBLIC_KEY_VALUE_HERE pelo valor da sua chave pública.

Registrar um service worker

Seu cliente vai precisar de um service worker para receber e mostrar notificações. É melhor registrar o service worker o quanto antes. Consulte Receber e mostrar as mensagens push como notificações para mais contexto.

  • Substitua o comentário // TODO add startup logic here pelo seguinte código:
// TODO add startup logic here
if ('serviceWorker' in navigator && 'PushManager' in window) {
  navigator.serviceWorker.register('./service-worker.js').then(serviceWorkerRegistration => {
    console.info('Service worker was registered.');
    console.info({serviceWorkerRegistration});
  }).catch(error => {
    console.error('An error occurred while registering the service worker.');
    console.error(error);
  });
  subscribeButton.disabled = false;
} else {
  console.error('Browser does not support service workers or push messages.');
}

subscribeButton.addEventListener('click', subscribeButtonHandler);
unsubscribeButton.addEventListener('click', unsubscribeButtonHandler);
  • Pressione "Control+Shift+J" (ou "Command+Option+J" no Mac) para abrir o DevTools.
  • Clique na guia Console. A mensagem Service worker was registered. vai aparecer no console.

Solicitar permissão de notificação push

Nunca peça permissão para enviar notificações push no carregamento da página. Em vez disso, a interface precisa perguntar ao usuário se ele quer receber notificações push. Depois que eles confirmarem explicitamente (com um clique de botão, por exemplo), você poderá iniciar o processo formal para receber permissão de notificação push do navegador.

  • Em public/index.js, substitua o comentário // TODO em subscribeButtonHandler() pelo seguinte código:
// TODO
// Prevent the user from clicking the subscribe button multiple times.
subscribeButton.disabled = true;
const result = await Notification.requestPermission();
if (result === 'denied') {
  console.error('The user explicitly denied the permission request.');
  return;
}
if (result === 'granted') {
  console.info('The user accepted the permission request.');
}
  • Volte para a guia do app e clique em Inscrever-se para receber notificações push. Seu navegador ou sistema operacional provavelmente vai perguntar se você quer permitir que o site envie notificações push. Clique em Permitir ou em uma frase equivalente que seu navegador/SO usa. No console, você vai ver uma mensagem indicando se a solicitação foi aceita ou negada.

Inscrever-se para receber notificações push

O processo de inscrição envolve a interação com um serviço da Web controlado pelo fornecedor do navegador, chamado de serviço de push. Depois de receber as informações de inscrição em notificações push, envie-as para um servidor e faça com que ele as armazene em um banco de dados a longo prazo. Consulte Inscrever o cliente para receber notificações push para mais contexto sobre o processo de inscrição.

  • Adicione o seguinte código destacado a subscribeButtonHandler():
subscribeButton.disabled = true;
const result = await Notification.requestPermission();
if (result === 'denied') {
  console.error('The user explicitly denied the permission request.');
  return;
}
if (result === 'granted') {
  console.info('The user accepted the permission request.');
}
const registration = await navigator.serviceWorker.getRegistration();
const subscribed = await registration.pushManager.getSubscription();
if (subscribed) {
  console.info('User is already subscribed.');
  notifyMeButton.disabled = false;
  unsubscribeButton.disabled = false;
  return;
}
const subscription = await registration.pushManager.subscribe({
  userVisibleOnly: true,
  applicationServerKey: urlB64ToUint8Array(VAPID_PUBLIC_KEY)
});
notifyMeButton.disabled = false;
fetch('/add-subscription', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(subscription)
});

A opção userVisibleOnly precisa ser true. Talvez um dia seja possível enviar mensagens sem mostrar notificações visíveis ao usuário (envios silenciosos), mas os navegadores não permitem isso devido a questões de privacidade.

O valor applicationServerKey depende de uma função utilitária que converte uma string base64 em um Uint8Array. Esse valor é usado para autenticação entre o servidor e o serviço de push.

Cancelar a inscrição nas notificações push

Depois que um usuário se inscrever nas notificações push, a interface precisará oferecer uma maneira de cancelar a inscrição caso o usuário mude de ideia e não queira mais receber notificações push.

  • Substitua o comentário // TODO em unsubscribeButtonHandler() pelo seguinte código:
// TODO
const registration = await navigator.serviceWorker.getRegistration();
const subscription = await registration.pushManager.getSubscription();
fetch('/remove-subscription', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({endpoint: subscription.endpoint})
});
const unsubscribed = await subscription.unsubscribe();
if (unsubscribed) {
  console.info('Successfully unsubscribed from push notifications.');
  unsubscribeButton.disabled = true;
  subscribeButton.disabled = false;
  notifyMeButton.disabled = true;
}

Receber uma mensagem push e mostrar como notificação

Como mencionado antes, você precisa de um service worker para processar o recebimento e a exibição de mensagens enviadas por push ao cliente do seu servidor. Consulte Receber e mostrar as mensagens push como notificações para mais detalhes.

  • Abra public/service-worker.js e substitua o comentário // TODO no manipulador de eventos push do service worker pelo código a seguir:
// TODO
let data = event.data.json();
const image = 'logo.png';
const options = {
  body: data.options.body,
  icon: image
}
self.registration.showNotification(
  data.title, 
  options
);
  • Volte para a guia do app.
  • Clique em Me avise. Você vai receber uma notificação push.
  • Tente abrir o URL da guia do app em outros navegadores (ou até mesmo em outros dispositivos), siga o fluxo de trabalho de assinatura e clique em Notificar todos. Você vai receber a mesma notificação push em todos os navegadores em que se inscreveu. Consulte Compatibilidade do navegador para ver uma lista de combinações de navegador/SO que funcionam ou não.

Você pode personalizar a notificação de várias maneiras. Consulte os parâmetros de ServiceWorkerRegistration.showNotification() para saber mais.

Abrir um URL quando um usuário clicar em uma notificação

No mundo real, você provavelmente usará a notificação como uma forma de reengajar o usuário e pedir que ele visite seu site. Para isso, é necessário configurar um pouco mais o service worker.

  • Substitua o comentário // TODO no manipulador de eventos notificationclick do service worker pelo seguinte código:
// TODO
event.notification.close();
event.waitUntil(self.clients.openWindow('https://web.dev'));
  • Volte para a guia do app, envie outra notificação para você mesmo e clique nela. O navegador vai abrir uma nova guia e carregar https://web.dev.

Próximas etapas