Notificações push na web, explicadas

Notificações push na web

Notificações push na web: o que são e como funcionam | We.Inc

O que são notificações push na web, as três APIs do navegador por trás delas, a regra da tela de início do iPhone e uma demonstração de permissão que você pode testar no seu navegador.

Uma notificação push é uma mensagem curta que um site ou app envia para o seu dispositivo e que aparece mesmo com o site fechado. Na web, ela precisa de três recursos do navegador: um service worker rodando em segundo plano, a Push API para receber a mensagem e a Notifications API para exibi-la, depois que o visitante concorda.

As peças do web push

Peça
O que faz

Service worker
Um script que o navegador guarda para o seu site e que pode acordar quando chega uma mensagem

Push API
Inscreve o navegador e recebe as mensagens enviadas pelo seu servidor

Notifications API
Pede permissão e desenha a notificação na tela

Seu servidor
Guarda cada inscrição e envia mensagens pelo serviço de push do navegador

Push é como uma loja avisa um cliente de que o pedido foi enviado, ou como um site de agendamentos lembra alguém da consulta de amanhã, sem e-mail. Bem feito, é bem-vindo; pedido cedo demais, é bloqueado para sempre. A demonstração abaixo mostra os estados de permissão usando apenas uma notificação local.

O seu site registra um service worker, um script de segundo plano, em uma página HTTPS.
Quando o visitante toca em um botão como Me avise, você chama Notification.requestPermission().
Se ele permitir, o service worker chama pushManager.subscribe() com a chave pública do seu servidor e recebe uma inscrição.
Você salva essa inscrição no seu servidor. Depois o servidor envia uma mensagem para ela, o service worker recebe um evento push e mostra uma notificação.

Peça depois de um momento claro de interesse, como fazer um pedido, não no primeiro carregamento da página.
Mostre antes a sua própria perguntinha; só chame o aviso do navegador se a pessoa disser sim. Um bloqueio no navegador é difícil de desfazer para o visitante.
Diga o que vai enviar e com que frequência, e cumpra isso.
Use uma tag para que uma atualização nova substitua a antiga em vez de se acumular.
Ofereça um jeito de desligar as notificações dentro do seu site, não só nas configurações do navegador.

Perguntas frequentes

Notificações push na web funcionam no iPhone?

Sim, desde o iOS e iPadOS 16.4, para web apps adicionados à Tela de Início. O WebKit diz que esse app pode pedir permissão, e o pedido precisa vir de uma ação direta do usuário, como tocar em um botão.

O site precisa estar aberto para receber um push?

Não. O MDN descreve a Push API como algo que permite a um web app receber mensagens esteja ele em primeiro plano ou não, ou mesmo sem estar carregado. O service worker cuida da mensagem.

Quais são os três estados de permissão?

granted (o visitante permitiu), denied (bloqueou) e default (ainda não decidiu). No estado default, o navegador age como se fosse denied.

Preciso de HTTPS?

Sim. O MDN indica que o pedido de permissão de Notifications só está disponível em contextos seguros, e diz que os service workers também só estão disponíveis em contextos seguros (http://localhost conta enquanto você desenvolve).

O que é userVisibleOnly?

Uma opção de pushManager.subscribe() que promete que todo push vai produzir algo que o usuário consegue ver. O MDN observa que o Chrome e o Edge rejeitam a inscrição se ela não estiver definida como true.

Push, mensagens no app e e-mail

O push chega à área de notificações do dispositivo, o que o torna certo para coisas urgentes e pessoais: uma entrega hoje, uma mesa pronta, um problema no pagamento.
Qualquer coisa longa, ou que a pessoa precise encontrar de novo depois, vai por e-mail. Uma promoção todo dia não deve chegar nem perto do push.

A permissão é uma chance única

Depois que um visitante bloqueia as notificações, a permissão fica como denied e o próprio exemplo do MDN simplesmente para de pedir; reativar depende do visitante, nas configurações do site no navegador. É por isso que um pedido suave, o seu próprio banner antes do aviso real, é tão comum.
O MDN também observa que o Chrome e o Firefox não permitem mais o pedido de permissão a partir de um iframe de outra origem, então peça a partir da sua própria página principal.

O código, passo a passo

Na página: pedir e depois inscrever

Só roda quando o visitante toca no seu botão. A chave pública vem do par de chaves VAPID do seu servidor.

No sw.js: mostrar a mensagem

O service worker acorda com um evento push e precisa mostrar uma notificação para ele.

Teste o fluxo de permissão

Isto verifica o que o seu navegador suporta e permite que você mostre a si mesmo uma notificação local. Nada é inscrito e nenhum servidor participa.

O que este navegador suporta

Recurso
Disponível aqui

Notifications API

Service workers

Push API (PushManager)

Página segura (HTTPS)

Sim

Não

Permissão de notificação agora:

Ainda não pedida (default)

Permitida (granted)

Bloqueada (denied)

Não suportada neste navegador

Pedir permissão

Mostrar uma notificação de teste

Seu pedido está pronto

Este é um teste local do guia da we.inc. Nenhum servidor enviou isto.

Enviada ao seu sistema. Se nada apareceu, confira as configurações de notificação do seu dispositivo.

Este navegador não quis mostrar uma notificação da página. Em muitos celulares, as notificações só chegam por um service worker.

Você bloqueou as notificações deste site. Só você pode desfazer isso, nas configurações do site ao lado da barra de endereço.

Quer receber uma mensagem quando o seu pedido for enviado?

Só enviamos atualizações de envio. Desative quando quiser.

Sim, me avise

Agora não

Nenhum aviso do navegador foi mostrado, então você pode pedir de novo depois sem ser bloqueado.

Notificações push na web, explicadas