Visão geral das notificações push

Uma visão geral do que são as notificações push, por que elas podem ser usadas e como elas funcionam.

Kayce Basques
Kayce Basques
X GitHub Falha

O que são as notificações push?

As mensagens push permitem que você chame a atenção dos usuários para as informações mesmo quando eles não estão usando o site. Elas são chamadas de push porque você pode enviar informações aos seus usuários mesmo quando eles não estão ativos. Compare a tecnologia Push com a tecnologia Pull para entender melhor esse conceito.

As notificações apresentam pequenos blocos de informação a um usuário. Os sites podem usar notificações para informar aos usuários sobre eventos ou ações importantes e urgentes. A aparência das notificações varia de acordo com a plataforma:

Exemplos de notificações no macOS e Android.
Exemplos de notificações no macOS e Android.

Mensagens push e notificações são duas tecnologias separadas, mas complementares. Push é a tecnologia para enviar mensagens do seu servidor aos usuários mesmo quando eles não estão usando ativamente seu site. As notificações são a tecnologia usada para exibir as informações enviadas por push no dispositivo do usuário. É possível usar notificações sem mensagens push. Um dia, também será possível usar mensagens push sem notificações voltadas para o usuário (push silencioso), mas os navegadores não permitem isso no momento. Na prática, eles geralmente são usados juntos. Um usuário não técnico provavelmente não entenderá a diferença entre mensagens push e notificações. Nesta coleção, o termo notificações push significa a combinação de envio de uma mensagem seguida pela exibição dela como uma notificação. Quando falamos em mensagens push, estamos nos referindo à tecnologia push por conta própria. E quando falamos de notificações, isso se refere à tecnologia de notificação por si só.

Por que usar as notificações push?

  • Para os usuários, as notificações push são uma maneira de receber informações oportunas, relevantes e precisas.
  • Para você (proprietário de um site), as notificações push são uma forma de aumentar o engajamento do usuário.

Como as notificações push funcionam?

De modo geral, as principais etapas para implementar as notificações push são:

  1. Adicionar lógica do cliente para pedir permissão ao usuário para enviar notificações push e, em seguida, enviar informações do identificador do cliente ao seu servidor para armazenamento em um banco de dados.
  2. Adicionar lógica de servidor para enviar mensagens por push para dispositivos clientes.
  3. Adicionar lógica do cliente para receber mensagens que foram enviadas ao dispositivo e exibi-las como notificações.

O restante desta página explica essas etapas com mais detalhes.

Conseguir permissão para enviar notificações push

Primeiro, seu site precisa ter a permissão do usuário para enviar notificações push. Isso precisa ser acionado por um gesto do usuário, como clicar em um botão Yes ao lado de uma solicitação Do you want to receive push notifications?. Após essa confirmação, chame Notification.requestPermission(). O sistema operacional ou o navegador no dispositivo do usuário provavelmente vai apresentar algum tipo de interface para confirmar formalmente se o usuário quer ativar as notificações push. Essa interface varia de acordo com a plataforma.

Inscrever o cliente nas notificações push

Depois de receber a permissão, o site precisa iniciar o processo para inscrever o usuário nas notificações push. Isso é feito no JavaScript usando a API Push. Será necessário fornecer uma chave pública de autenticação durante o processo de assinatura. Você aprenderá mais sobre isso depois. Depois que você inicia o processo de assinatura, o navegador faz uma solicitação de rede para um serviço da Web conhecido como serviço de push, que você também aprenderá mais tarde.

Supondo que a assinatura tenha sido bem-sucedida, o navegador retorna um objeto PushSubscription. Você precisará armazenar esses dados por um longo prazo. Geralmente, isso é feito enviando as informações para um servidor que você controla e, em seguida, fazendo com que o servidor as armazene em um banco de dados.

Consiga permissão para enviar mensagens push. Recebe PushSubscription. Envie PushSubscription ao servidor.

Enviar uma mensagem push

Seu servidor não envia a mensagem push diretamente para um cliente. Um serviço push faz isso. Um serviço de push é um serviço da Web controlado pelo fornecedor do navegador do usuário. Quando quiser enviar uma notificação push a um cliente, faça uma solicitação de serviço da Web para um serviço push. A solicitação de serviço da Web que você envia ao serviço de push é conhecida como solicitação de protocolo de push da Web. A solicitação do protocolo de push da Web precisa incluir:

  • Quais dados incluir na mensagem.
  • Para qual cliente enviar a mensagem.
  • Instruções sobre como o serviço de push deve entregar a mensagem. Por exemplo, você pode especificar que o serviço de push pare de tentar enviar a mensagem após 10 minutos.

Normalmente, a solicitação do protocolo de push da Web é feita por um servidor controlado por você. Obviamente, o servidor não precisa construir a solicitação de serviço da Web bruta por conta própria. Existem bibliotecas que podem fazer isso para você, como as web-push-libs. Mas o mecanismo subjacente é uma solicitação de serviço da Web por HTTP.

Seu servidor envia uma solicitação de protocolo de push da Web para o serviço de push e este envia a mensagem para o dispositivo do usuário.

O serviço de push recebe sua solicitação, a autentica e encaminha a mensagem para o cliente apropriado. Se o navegador do cliente estiver off-line, o serviço push vai colocar as mensagens na fila até que o navegador fique on-line.

Cada navegador usa o serviço de push que quiser. Você, como desenvolvedor de sites, não tem controle sobre isso. Isso não é um problema, porque a solicitação do protocolo de push da Web é padronizada. Em outras palavras, você não precisa se preocupar com qual serviço de push o fornecedor do navegador está usando. Você só precisa verificar se a solicitação do protocolo de push da Web segue as especificações. Por exemplo, a especificação afirma que a solicitação precisa incluir determinados cabeçalhos e que os dados precisam ser enviados como um stream de bytes.

No entanto, você precisa ter certeza de que está enviando a solicitação do protocolo de push da Web para o serviço de push correto. Os dados de PushSubscription que o navegador retornou para você durante o processo de assinatura fornecem essas informações. Um objeto PushSubscription tem esta aparência:

{
  "endpoint": "https://fcm.googleapis.com/fcm/send/c1KrmpTuRm…",
  "expirationTime": null,
  "keys": {
    "p256dh": "BGyyVt9FFV…",
    "auth": "R9sidzkcdf…"
  }
}

O domínio do endpoint é essencialmente o serviço de push. O caminho do endpoint contém informações do identificador do cliente que ajudam o serviço de push a determinar exatamente para qual cliente enviar a mensagem.

Os keys são usados para criptografia. Isso é explicado a seguir.

Criptografar a mensagem push

Os dados enviados para um serviço de push precisam ser criptografados. Isso impede que o serviço de push acesse os dados que você está enviando ao cliente. Lembre-se de que o fornecedor do navegador decide qual serviço de push usar, e esse serviço pode teoricamente não ser seguro. O servidor precisa usar o keys fornecido no PushSubscription para criptografar as solicitações do protocolo de push da Web.

Assinar suas solicitações do protocolo push da Web

O serviço de push oferece uma maneira de impedir que outras pessoas enviem mensagens aos seus usuários. Tecnicamente, você não precisa fazer isso, mas a implementação mais fácil no Chrome exige isso. Ele é opcional no Firefox. Outros navegadores podem exigir isso no futuro.

Esse fluxo de trabalho envolve uma chave privada e uma chave pública exclusivas para seu aplicativo. O processo de autenticação funciona aproximadamente da seguinte maneira:

  • Você gera as chaves privada e pública como uma tarefa única. A combinação da chave privada e pública é conhecida como chaves do servidor de aplicativos. Elas também podem ser conhecidas como chaves VAPID. VAPID é a especificação que define esse processo de autenticação.
  • Ao inscrever um cliente para receber notificações push do seu código JavaScript, você fornece sua chave pública. Quando o serviço de push gera um endpoint para o dispositivo, ele associa a chave pública fornecida ao endpoint.
  • Ao enviar uma solicitação de protocolo de push da Web, você assina algumas informações JSON com sua chave privada.
  • Quando o serviço de push recebe sua solicitação de protocolo de push da Web, ele usa a chave pública armazenada para autenticar as informações assinadas. Se a assinatura for válida, o serviço de push saberá que a solicitação veio de um servidor com a chave privada correspondente.

Personalizar a entrega da mensagem push

A especificação de solicitação do protocolo de push da Web também define parâmetros que permitem personalizar como o serviço de push tenta enviar a mensagem para o cliente. Por exemplo, você pode personalizar:

  • O time to live (TTL) de uma mensagem, que define por quanto tempo o serviço de push precisa tentar entregar uma mensagem.
  • A urgência da mensagem, que é útil caso o serviço de push esteja preservando a duração da bateria do cliente ao entregar apenas mensagens de alta prioridade.
  • O tópico de uma mensagem, que substitui todas as mensagens pendentes do mesmo tópico pela mensagem mais recente.

Receber e exibir as mensagens enviadas como notificações

Depois que você enviar a solicitação do protocolo de push da Web para o serviço de push, ele manterá a solicitação na fila até que um dos seguintes eventos aconteça:

  1. O cliente entra on-line e o serviço de push entrega a mensagem push.
  2. A mensagem expira.

Quando um navegador cliente recebe uma mensagem enviada, ele descriptografa os dados da mensagem push e envia um evento push ao service worker. Um service worker é basicamente um código JavaScript que pode ser executado em segundo plano, mesmo quando o site não está aberto ou o navegador está fechado. No manipulador de eventos push do service worker, chame ServiceWorkerRegistration.showNotification() para exibir as informações como uma notificação.

A mensagem chega no dispositivo. O navegador ativa o service worker. O evento push é enviado.

A seguir

Laboratórios de códigos