Codelab: criar um cliente de notificação push

Kate Jeffreys
Kate Jeffreys
Kayce Basques
Kayce Basques
X GitHub Falha

Este codelab mostra em etapas como criar um cliente de notificações push. Ao final do codelab, você terá um cliente que:

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

O foco deste codelab é ajudar você a aprender fazendo e não aplicando falar muito sobre conceitos. Finalizar compra Como funcionam as notificações push? para saber mais sobre os conceitos de notificação push.

O código do servidor deste codelab já está completo. Você só terá implementar o cliente neste codelab. Para saber como implementar servidor de notificação push, confira Codelab: criar uma notificação push servidor.

Confira push-notifications-client-codelab-complete. (fonte) para conferir o código completo.

Compatibilidade com navegadores

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

  • Windows: Chrome, Edge
  • macOS: Chrome e 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 e Safari
  • iOS

Configuração

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

O editor de código exibido à direita dessas instruções será chamado a interface do Glitch ao longo deste codelab.

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

Configurar a autenticação

Antes de ativar as notificações push, você precisa configurar servidor e cliente com chaves de autenticação. Consulte Assinar suas solicitações do protocolo de push da Web. para saber por quê.

  1. Na interface do Glitch, clique em Tools e em Terminal para abrir o terminal.
  2. No terminal do Glitch, execute npx web-push generate-vapid-keys. Copie a chave privada e chaves públicas.
  3. Na interface do Glitch, abra .env e atualize VAPID_PUBLIC_KEY e VAPID_PRIVATE_KEY. Definir VAPID_SUBJECT para mailto:test@test.test. Todos esses valores precisam ser unidos entre aspas duplas. Depois das atualizações, o arquivo .env terá esta aparência: semelhante a:
VAPID_PUBLIC_KEY="BKiwTvD9HA…"
VAPID_PRIVATE_KEY="4mXG9jBUaU…"
VAPID_SUBJECT="mailto:test@test.test"
  1. Feche o terminal do Glitch.
.
  1. Abra public/index.js.
  2. Substitua VAPID_PUBLIC_KEY_VALUE_HERE pelo valor da chave pública.

Registrar um service worker

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

  1. Substitua o comentário // TODO add startup logic here por este 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);
  1. Para visualizar o site, pressione Ver app. Em seguida, pressione Tela cheia tela cheia
.
  1. Pressione "Control+Shift+J" (ou "Command+Option+J" no Mac) para abrir o DevTools.
  2. Clique na guia Console. Você verá a mensagem Service worker was registered. fez login no console.
.

Solicitar permissão de notificações push

Nunca solicite permissão para enviar notificações push quando a página for carregada. Em vez disso, a interface precisa perguntar se o usuário quer receber notificações push. Após a confirmação explícita (com um clique em um botão, por exemplo), você pode iniciar o processo formal para obter a permissão de notificações push do navegador.

  1. Na interface do Glitch, clique em Ver código-fonte para retornar ao código.
  2. 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.');
}
  1. Volte para a guia do aplicativo e clique em Inscrever-se para push. Seu navegador ou sistema operacional pergunta se você quer que o site enviar notificações push para você. Clique em Permitir (ou em outra frase equivalente) seu navegador/SO utiliza). No console, você verá uma mensagem indicando se a solicitação foi aceita ou negada.
.

Inscrever-se nas notificações push

O processo de assinatura envolve a interação com um serviço da Web controlado pelo fornecedor do navegador, chamado de serviço de push. Ao receber as informações de inscrição de notificações push necessárias para enviá-las a um servidor e fazer com que o servidor os armazene em um banco de dados por um longo prazo. Consulte Inscrever o cliente para receber notificações push. para mais contexto sobre o processo de assinatura.

  1. 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. Um dia pode ser possível para enviar mensagens por push sem exibir notificações visíveis ao usuário (envios silenciosos), mas esses navegadores não permitem esse recurso no momento. por 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 do usuário entre o servidor e o serviço de push.

Cancelar inscrição nas notificações push

Depois que um usuário se inscreve para receber notificações push, sua interface precisa oferecem uma forma de cancelar a inscrição caso o usuário mude de ideia. e não quer mais receber notificações push.

  1. Substituir 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 exibi-la como notificação

Como mencionado anteriormente, você precisa de um service worker para lidar com os receber e exibir mensagens que foram enviadas ao cliente; do seu servidor. Consulte Receber e exibir as mensagens enviadas como notificações para saber mais detalhes.

  1. Abrir public/service-worker.js e substituir o comentário // TODO no manipulador de eventos push do service worker pelo seguinte código:
// TODO
let data = event.data.json();
const image = 'https://cdn.glitch.com/614286c9-b4fc-4303-a6a9-a4cef0601b74%2Flogo.png?v=1605150951230';
const options = {
  body: data.options.body,
  icon: image
}
self.registration.showNotification(
  data.title, 
  options
);
  1. Volte para a guia do app.
  2. Clique em Receber notificação. Você vai receber uma notificação push.
  3. Tente abrir o URL da guia do aplicativo em outros navegadores (ou até outros dispositivos), passando pelo fluxo de trabalho de assinatura e, em seguida, clique em Notificar tudo. Você vai receber a mesma notificação push em todos os navegadores em que você se inscreveu. Consulte Compatibilidade do navegador para ver uma lista de navegadores e sistemas operacionais combinações 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 maneira para engajar novamente o usuário e levá-lo a acessar seu site. Para fazer isso, você precisa configurar um pouco mais o service worker.

  1. Substitua o comentário // TODO no notificationclick do service worker. manipulador de eventos com o seguinte código:
// TODO
event.notification.close();
event.waitUntil(self.clients.openWindow('https://web.dev'));
  1. Volte para a guia do aplicativo, envie outra notificação para si mesmo e clique na notificação. Seu navegador abrirá uma nova guia e carregará https://web.dev:

Próximas etapas