Usar notificações push para engajar e reengajar usuários

Kate Jeffreys

Por que usar as notificações push?

As notificações apresentam pequenos blocos de informação a um usuário. Os apps da Web podem usar notificações para informar os usuários sobre eventos ou ações importantes e urgentes.

A aparência das notificações varia de acordo com a plataforma. Exemplo:

Tradicionalmente, os navegadores da Web tinham que iniciar a troca de informações entre o servidor e o cliente fazendo uma solicitação. A tecnologia push da Web, por outro lado, permite configurar o servidor para enviar notificações quando fizer sentido para o app. Um serviço de push cria URLs exclusivos para cada service worker inscrito. O envio de mensagens para o URL de um service worker gera eventos nesse service worker, solicitando que ele exiba uma notificação.

As notificações push ajudam os usuários a aproveitar ao máximo seu app, solicitando que eles o reabram e o usem com base nas informações mais recentes.

Como criar e enviar notificações

Crie notificações usando a API Notifications. Um objeto Notification tem uma string title e um objeto options. Exemplo:

let title = 'Hi!';
let options = {
  body: 'Very Important Message',
  /* other options can go here */
};
let notification = new Notification(title, options);

A title é mostrada em negrito quando a notificação está ativa, enquanto a body contém texto adicional.

Conseguir permissão para enviar notificações

Para mostrar uma notificação, seu app precisa receber permissão do usuário:

Notification.requestPermission();

Como as notificações push funcionam?

O verdadeiro poder das notificações vem da combinação de service workers e tecnologia push:

• Os service workers podem ser executados em segundo plano e exibir notificações mesmo quando seu app não está visível na tela.

• A tecnologia push permite que você configure o servidor para enviar notificações quando fizer sentido para o aplicativo. Um serviço de push cria URLs exclusivos para cada service worker inscrito. O envio de mensagens para o URL de um service worker gera eventos nesse service worker, solicitando que ele exiba uma notificação.

No fluxo de exemplo a seguir, um cliente registra um service worker e se inscreve para receber notificações push. Depois, o servidor envia uma notificação para o endpoint de assinatura.

O cliente e o service worker usam JavaScript básico sem bibliotecas extras. O servidor é criado com o pacote npm express em Node.js e usa o pacote npm web-push para enviar notificações. Para enviar informações ao servidor, o cliente faz uma chamada para um URL POST que o servidor expôs.

Parte 1: registrar um service worker e se inscrever no Push

1. Um app cliente registra um service worker com ServiceWorkerContainer.register(). O service worker registrado continuará sendo executado em segundo plano quando o cliente estiver inativo.

   Código do cliente:

   navigator.serviceWorker.register('sw.js');
   

2. O cliente solicita permissão do usuário para enviar notificações.

   Código do cliente:

   Notification.requestPermission();
   

3. Para ativar as notificações push, o service worker usa PushManager.subscribe() para criar uma assinatura de push. Na chamada para PushManager.subscribe(), o service worker fornece a chave de API do app como um identificador.

   Código do cliente:

   navigator.serviceWorker.register('sw.js').then(sw => {
     sw.pushManager.subscribe({ /* API key */ });
   });
   

   Serviços de push, como o Firebase Cloud Messaging, operam em um modelo de assinatura. Quando um service worker se inscreve em um serviço de push chamando PushManager.subscribe(), o serviço cria um URL exclusivo para esse service worker. O URL é conhecido como um endpoint de assinatura.

4. O cliente envia o endpoint da assinatura para o servidor do app.

   Código do cliente:

   navigator.serviceWorker.register('sw.js').then(sw => {
     sw.pushManager.subscribe({ /* API key */ }).then(subscription => {
       sendToServer(subscription, '/new-subscription', 'POST');
     });
   });
   

   Código do servidor:

   app.post('/new-subscription', (request, response) => {
     // extract subscription from request
     // send 'OK' response
   });
   

Parte 2: enviar uma notificação

1. O servidor da Web envia uma notificação para o endpoint de assinatura.

   Código do servidor:

   const webpush = require('web-push');
   
   let options = { /* config info for cloud messaging and API key */ };
   let subscription = { /* subscription created in Part 1*/ };
   let payload = { /* notification */ };
   
   webpush.sendNotification(subscription, payload, options);
   

2. As notificações enviadas ao endpoint de assinatura disparam eventos de push com o service worker como destino. O service worker recebe a mensagem e a exibe para o usuário como uma notificação.

   Código do service worker:

   self.addEventListener('push', (event) => {
     let title = { /* get notification title from event data */ }
     let options = { /* get notification options from event data */ }
     showNotification(title, options);
   })
   

3. O usuário interage com a notificação, ativando o app da Web, caso ainda não tenha feito isso.

Próximas etapas

A próxima etapa é implementar as notificações push.

Criamos uma série de codelabs para guiar você em cada etapa do processo.