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 push com a tecnologia Pull para entender melhor esse conceito.

As notificações apresentam pequenos pedaços de informação a um 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
.

Mensagens push e notificações 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. Notificações são a tecnologia 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 pode ser possível usar mensagens push sem notificações voltadas para o usuário (push silencioso), mas isso não é permitido pelos navegadores. Na prática, eles costumam ser 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 a implementação de notificações push são:

  1. Adicionar uma lógica de cliente para solicitar permissão ao usuário para enviar notificações push e enviar informações do identificador do cliente ao 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 com 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 por JavaScript usando a API Push. Será necessário fornecer uma chave pública de autenticação durante o processo de assinatura. Você vai aprender mais sobre isso depois. 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. Esses dados precisam ser armazenados por um longo prazo. 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. Receber PushSubscription. Envie PushSubscription ao 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 a 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 de 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, a solicitação do protocolo de push na Web é feita por meio de um servidor controlado por você. 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 de push recebe a solicitação, a autentica e a roteia 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. 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 garantir que sua solicitação do protocolo de push da Web siga a especificação. Entre outras coisas, a especificação indica que a solicitação precisa incluir determinados cabeçalhos, e 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 que você envia para um serviço de push precisam ser criptografados. Isso impede que o serviço de push visualize os dados que você está enviando ao 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 do protocolo de 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 de 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 da solicitação de protocolo de push da Web também define parâmetros que permitem personalizar como o serviço de push tenta enviar a mensagem de push 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 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 de push entrega a mensagem push.
  2. A mensagem expira.

Quando um navegador cliente recebe uma mensagem enviada, ele descriptografa os dados da mensagem de push e envia um evento push para seu service worker. Um service worker é basicamente um código JavaScript que pode ser executado em segundo plano, mesmo quando seu 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

Codelabs