Por que usar as notificações push?
As notificações apresentam pequenos pedaços de informação a um usuário. Os aplicativos da Web podem usar notificações para informar aos usuários sobre eventos importantes e urgentes ou sobre ações que o usuário precisa realizar.
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 servidor e cliente fazendo uma solicitação. A tecnologia de 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 ao URL de um service worker gera eventos nesse service worker, solicitando que ele mostre uma notificação.
As notificações push ajudam os usuários a aproveitar ao máximo seu app, solicitando que eles o abram e 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
é exibido em negrito quando a notificação está ativa, enquanto a body
contém texto adicional.
Pedir permissão para enviar notificações
Para exibir uma notificação, o app precisa ter permissão do usuário:
Notification.requestPermission();
Como funcionam as notificações push?
O verdadeiro poder das notificações vem da combinação de service workers e tecnologia de 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 de push permite configurar seu servidor para enviar notificações quando fizer sentido para o seu aplicativo. Um serviço de push cria URLs exclusivos para cada service worker inscrito. O envio de mensagens ao URL de um service worker gera eventos nesse service worker, solicitando que ele mostre 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 ao endpoint da assinatura.
O cliente e o service worker usam JavaScript básico 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 para um URL POST que o servidor expôs.
Parte 1: registrar um service worker e assinar o Push
Um app cliente registra um service worker com
ServiceWorkerContainer.register()
. O service worker registrado continuará em execução em segundo plano quando o cliente estiver inativo.Código do cliente:
navigator.serviceWorker.register('sw.js');
O cliente solicita a permissão do usuário para enviar notificações.
Código do cliente:
Notification.requestPermission();
Para ativar notificações push, o service worker usa
PushManager.subscribe()
para criar uma assinatura de push. Na chamada paraPushManager.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 de push cria um URL exclusivo para esse service worker. O URL é conhecido como endpoint de assinatura.O cliente envia o endpoint da assinatura para o servidor de aplicativos.
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 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);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 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 app da Web, caso ainda não tenha feito isso.
Próximas etapas
O próximo passo é implementar as notificações push.
Criamos uma série de codelabs para orientar você em cada etapa do processo.