Visão geral das notificações push

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

Kayce Basques

Matt Gaunt

O que são notificações push?

As mensagens push permitem que você chame a atenção dos usuários para informações importantes, mesmo quando eles não estão usando seu site. Elas são chamadas de mensagens push porque você pode "enviar" informações aos 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ções a um usuário. Os sites podem usar notificações para informar os usuários sobre eventos importantes e urgentes ou ações que eles precisam realizar. A aparência das notificações varia entre as plataformas:

As mensagens e notificações push são duas tecnologias separadas, mas complementares. O push é a tecnologia para enviar mensagens do seu servidor aos usuários, mesmo quando eles não estão usando seu site ativamente. As notificações são a tecnologia para mostrar as informações enviadas 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 ao usuário (push silencioso), mas os navegadores não permitem isso no momento. Na prática, elas geralmente são usadas juntas. Um usuário não técnico provavelmente não entenderá a diferença entre mensagens e notificações push. Nesta coleção, quando dizemos notificações push , queremos dizer a combinação de enviar uma mensagem e mostrá-la como uma notificação. Quando dizemos mensagens push , estamos nos referindo à tecnologia push por conta própria. E quando dizemos notificações , estamos nos referindo à tecnologia de notificação por conta própria.

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

Como as notificações push funcionam?

Em um nível alto, as principais etapas para implementar 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 de identificador do cliente ao servidor para armazenamento em um banco de dados.
2. Adicionar lógica do servidor para enviar mensagens push aos dispositivos clientes.
3. Adicionar lógica do cliente para receber mensagens que foram 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 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 entre as plataformas.

Inscrever o cliente nas notificações push

Depois de receber permissão, seu site precisa iniciar o processo de inscrição do 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 inscrição, sobre o qual você aprenderá mais tarde. Depois de iniciar o processo de inscrição, o navegador faz uma solicitação de rede para um serviço da Web conhecido como serviço push, sobre o qual você também aprenderá mais tarde.

Supondo que a inscrição tenha sido bem-sucedida, o navegador retorna um PushSubscription objeto. Você precisará armazenar esses dados a longo prazo. Normalmente, 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.

Enviar uma mensagem push

Seu servidor não envia a mensagem push diretamente a um cliente. Um serviço push faz isso. Um serviço push é um serviço da Web controlado pelo fornecedor do navegador do usuário. Quando você quiser enviar uma notificação push a um cliente, será 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 ao serviço push é conhecida como solicitação de protocolo push da Web. A solicitação de protocolo push da Web precisa incluir:

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

Normalmente, você faz a solicitação de protocolo push da Web por meio de um servidor que você controla. É claro que seu servidor não precisa construir a solicitação de serviço da Web bruta. Há 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.

O serviço push recebe sua solicitação, 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 de protocolo push da Web é padronizada . Em outras palavras, você não precisa se preocupar com qual serviço push o fornecedor do navegador está usando. Basta garantir que a solicitação de protocolo push da Web siga a especificação. Entre outras coisas, a especificação afirma que a solicitação precisa incluir determinados cabeçalhos e que os dados precisam ser enviados como um fluxo de bytes.

No entanto, você precisa garantir que está enviando a solicitação de protocolo push da Web para o serviço push correto. Os dados PushSubscription que o navegador retornou durante o processo de inscrição fornecem essas informações. Um objeto PushSubscription é assim:

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

O domínio do endpoint é essencialmente 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.

As keys são usadas para criptografia, que é explicada a seguir.

Criptografar a mensagem push

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

Assinar as solicitações de protocolo 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. É opcional no Firefox. Outros navegadores podem exigir isso no futuro.

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

• Você gera a chave 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 chamadas de chaves VAPID. VAPID é a especificação que define esse processo de autenticação.
• Ao inscrever um cliente nas notificações push do seu código JavaScript, você fornece sua chave pública. Quando o serviço push gera um endpoint para o dispositivo, ele associa a chave pública fornecida ao endpoint.
• Ao enviar uma solicitação de protocolo push da Web, você assina algumas informações JSON com sua chave privada.
• Quando o serviço push recebe sua solicitação de protocolo 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 a entrega da mensagem push

A especificação de solicitação de protocolo push da Web também define parâmetros que permitem personalizar como o serviço push tenta enviar a mensagem 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 apenas entregando 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 de enviar a solicitação de protocolo push da Web para o serviço push, o serviço push mantém a solicitação enfileirada até que um dos seguintes eventos aconteça:

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 ao 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, você chama ServiceWorkerRegistration.showNotification() para mostrar as informações como uma notificação.

A seguir

• Visão geral das notificações push da Web
• Como o push funciona
• Inscrever um usuário
• UX de permissão
• Enviar mensagens com bibliotecas push da Web
• Protocolo push da Web
• Processar mensagens
• Mostrar uma notificação
• Comportamento de notificação
• Padrões de notificação comuns
• Perguntas frequentes sobre notificações push
• Problemas comuns e relatórios de bugs

Code labs

• Criar um cliente de notificação push
• Criar um servidor de notificação push