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

Kate Jeffreys

Por que usar notificações push?

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

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

Uma notificação em um dispositivo Android.

Tradicionalmente, os navegadores da Web precisavam iniciar a troca de informações entre o servidor e o cliente fazendo uma solicitação. Já a tecnologia de push na Web permite configurar o servidor para enviar notificações quando fizer sentido para seu 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 nele, o que faz com que uma notificação seja exibida.

As notificações push podem ajudar os usuários a aproveitar ao máximo seu app, pedindo que eles o abram novamente 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);

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

Receber permissão para enviar notificações

Para mostrar uma notificação, seu app precisa da 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 mostrar notificações mesmo quando o app não está visível na tela.
A tecnologia push permite configurar o servidor para enviar notificações quando isso fizer sentido para seu app. Um serviço push cria URLs exclusivos para cada service worker inscrito. O envio de mensagens para o URL de um service worker gera eventos nele, o que faz com que uma notificação seja exibida.

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

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

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

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

Código do cliente:
```
navigator.serviceWorker.register('sw.js');
```
O cliente pede permissão ao usuário para enviar notificações.

Código do cliente:
```
Notification.requestPermission();
```
Para ativar as notificações push, o service worker usa PushManager.subscribe() para criar uma assinatura 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 push, como o Firebase Cloud Messaging, operam em um modelo de assinatura. Quando um service worker se inscreve em um serviço push chamando PushManager.subscribe(), o serviço push cria um URL exclusivo para esse service worker. O URL é conhecido como um endpoint de assinatura.

O cliente envia o endpoint de inscrição 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

O servidor da Web envia uma notificação ao 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);

As notificações enviadas ao endpoint de inscrição acionam eventos push com o service worker como destino. O service worker recebe a mensagem e a mostra ao 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);
})

O usuário interage com a notificação, ativando o web app se ele ainda não estiver ativo.

Próximas etapas

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

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