Visão geral das notificações push

Uma visão geral sobre o que são as notificações push, por que usá-las e como elas funcionam.

Kayce Basques
Kayce Basques
X GitHub Falha

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

Com as mensagens push, você pode chamar a atenção dos usuários para informações, mesmo quando eles não estiverem usando o site. Elas são chamadas de mensagens push porque você pode "empurrar" informações para os usuários mesmo quando eles não estão ativos. Compare a tecnologia de envio com a tecnologia de retirada para entender melhor esse conceito.

As notificações apresentam pequenos pedaços de informação para o usuário. Os sites podem usar notificações para informar aos usuários sobre eventos importantes ou ações que precisam ser realizadas. O visual das notificações varia de acordo com a plataforma:

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

As notificações e mensagens push são duas tecnologias separadas, mas complementares. O push é a tecnologia usada para enviar mensagens do servidor aos usuários, mesmo quando eles não estão usando o site. As notificações são a tecnologia para exibir as informações enviadas no dispositivo do usuário. É possível usar notificações sem mensagens push. Um dia, talvez seja possível usar mensagens push sem notificações voltadas ao usuário (push silencioso), mas os navegadores atualmente não permitem isso. Na prática, eles geralmente são usados juntos. Um usuário não técnico provavelmente não vai entender a diferença entre mensagens push e notificações. Nesta coleção, quando usamos o termo notificações push, queremos dizer a combinação de enviar uma mensagem e mostrar como uma notificação. Quando falamos de mensagens push, nos referimos à tecnologia de envio em si. E quando falamos de notificações, nos referimos à tecnologia de notificação em si.

Por que usar 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 do site), as notificações push são uma maneira de aumentar o engajamento do usuário.

Como funcionam as notificações push?

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

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

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

Receber permissão para enviar notificações push

Primeiro, seu site precisa receber 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 Sim ao lado de um prompt 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 que o usuário quer ativar as notificações push. Essa interface varia de acordo com a plataforma.

Inscrever o cliente para receber notificações push

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

Supondo que a assinatura tenha sido bem-sucedida, o navegador retorna um objeto PushSubscription. Você vai precisar armazenar esses dados por um longo período. Isso geralmente é feito enviando as informações para um servidor que você controla e armazenando-as em um banco de dados.

Receber permissão para enviar mensagens push. Acessar PushSubscription. Envie PushSubscription para seu servidor.

Enviar uma mensagem push

Seu servidor não envia a mensagem push diretamente para um cliente. Um serviço de push faz isso. Um serviço push é um serviço da Web controlado pelo fornecedor do navegador do usuário. Quando você quer enviar uma notificação push para um cliente, é necessário fazer uma solicitação de serviço da Web para um serviço push. A solicitação de serviço da Web que você envia para o serviço de push é conhecida como uma 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 push deve entregar a mensagem. Por exemplo, você pode especificar que o serviço push deve parar de tentar enviar a mensagem após 10 minutos.

Normalmente, você faz a solicitação do protocolo de push da Web em um servidor que você controla. Claro, seu servidor não precisa construir a solicitação de serviço da Web bruta. Há bibliotecas que podem fazer isso por você, como a 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 o serviço de push envia a mensagem para o dispositivo do usuário.

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

Cada navegador usa o serviço push que quiser. Como desenvolvedor de sites, você 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 o serviço push que o fornecedor do navegador está usando. Você só precisa garantir que a solicitação do protocolo de push da Web siga a especificação. Entre outras coisas, a especificação determina que a solicitação precisa incluir determinados cabeçalhos e que os dados precisam ser enviados como um fluxo de bytes.

No entanto, é necessário enviar a solicitação do protocolo de push da Web para o serviço de push correto. Os dados PushSubscription que o navegador retornou a 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 é basicamente o serviço push. O caminho do endpoint é uma informação de identificador do cliente que ajuda o serviço push a determinar exatamente para qual cliente enviar a mensagem.

Os keys são usados para criptografia, conforme explicado a seguir.

Criptografar a mensagem push

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

Assinar suas solicitações de protocolo de push da Web

O serviço 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 o aplicativo. O processo de autenticação funciona mais ou menos assim:

  • Você gera a chave privada e pública como uma tarefa única. A combinação das chaves privada e pública é conhecida como chaves do servidor do aplicativo. Elas também podem ser chamadas de chaves VAPID. O VAPID é a especificação que define esse processo de autenticação.
  • Quando você inscreve um cliente para receber notificações push do seu código JavaScript, fornece sua chave pública. Quando o serviço push gera uma 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 push saberá que a solicitação veio de um servidor com a chave privada correspondente.

Personalizar o envio 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 ao cliente. Por exemplo, você pode personalizar:

  • O tempo de vida (TTL) de uma mensagem, que define por quanto tempo o serviço push precisa tentar entregar uma mensagem.
  • A urgência da mensagem, que é útil caso o serviço push esteja preservando a duração da bateria do cliente enviando 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 mostrar as mensagens push como notificações

Depois que você envia a solicitação do protocolo de push da Web para o serviço de push, ele mantém a solicitação na fila até que um dos seguintes eventos ocorra:

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

Quando um navegador cliente recebe uma mensagem push, ele descriptografa os dados da mensagem push e envia um evento push para o 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 gerenciador de eventos push do service worker, chame ServiceWorkerRegistration.showNotification() para mostrar as informações como uma notificação.

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

A seguir

Code labs