Visão geral das notificações push

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

Kayce Basques
Kayce Basques
X GitHub Falha

O que são notificações push?

As mensagens push permitem que você chame atenção do seu usuários, mesmo quando eles não estão usando seu site. Elas se chamam push porque você pode "enviar" informações aos usuários, mesmo quando eles estão inativo. Comparar Push tecnologia com Pull a tecnologia para entender isso mais adiante.

As notificações apresentam pequenos pedaços de informação a um usuário. Os sites podem usar notificações para informar os usuários sobre eventos ou ações importantes e urgentes que o usuário precisa realizar. A aparência 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. Push é a tecnologia para enviar mensagens de seu servidor para os usuários, mesmo quando eles não estiverem usando seu site ativamente. As notificações são a tecnologia exibindo 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 costumam ser usados juntos. Um usuário não técnico provavelmente não entenderá a diferença entre push mensagens e notificações. Nesta coleção, quando Quando falamos em notificações push, queremos dizer a combinação de enviar uma mensagem e, em seguida, exibindo-o como uma notificação. Quando mencionamos mensagens push estamos nos referindo à tecnologia push por si só. Quando mencionamos notificações, estamos nos referindo à 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 forma de receber mensagens oportunas, relevantes e informações precisas.
  • Para você (proprietário de um site), as notificações push são uma forma de aumentar o número de e engajamento.
.

Como funcionam as notificações push?

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

  1. Adicionar lógica de cliente para pedir permissão ao usuário para enviar notificações push e e enviar informações do identificador do cliente ao seu servidor para armazenamento em um banco de dados.
  2. Adição de lógica de servidor para enviar mensagens por push para dispositivos clientes.
  3. Adição de lógica de 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.

Receber permissão para enviar notificações push

Primeiro, seu site precisa de 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 comando Do you want to receive push notifications?. Após essa confirmação, chame Notification.requestPermission(). O sistema operacional ou no dispositivo do usuário provavelmente apresentará algum tipo de interface de usuário para confirmar formalmente o usuário quiser ativar as notificações push. Essa interface varia de acordo com a plataforma.

Fazer a inscrição do cliente para 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 saber mais sobre isso depois. Depois você inicia o processo de inscrição, o navegador faz uma solicitação de rede para um serviço da Web conhecido como serviço push, que você também aprenderá mais tarde.

Supondo que a inscrição tenha sido bem-sucedida, o navegador retorna uma PushSubscription objeto. Esses dados precisam ser armazenados por um longo prazo. Geralmente isso é feito enviando as informações para um servidor que você controla, para depois armazenar o servidor em um banco de dados.

Consiga permissão para enviar mensagens push. Recebe PushSubscription. Enviar PushSubscription para seu servidor.

Enviar uma mensagem push

O 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 pela sua fornecedor do navegador do usuário. Quando quiser enviar uma notificação push para um cliente, você precisará para fazer uma solicitação de serviço da Web a um serviço push. O serviço da Web solicita que que você envia ao serviço de push é conhecido como uma solicitação de protocolo de push da Web. A solicitação de 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, 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 na Web é feita por um servidor controlado por você. Claro, seu servidor não precisa criar a solicitação de serviço da Web bruto por conta própria. Existem bibliotecas que podem cuidar disso para você, como a web-push-libs (link em inglês). 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, autentica e encaminha a solicitação para o cliente apropriado. Se o navegador do cliente estiver off-line, o envio coloca a mensagem push na fila até que o navegador fique on-line.

Cada navegador usa o serviço push que quiser. Você, como desenvolvedor de sites não têm controle sobre isso. Isso não é um problema porque o protocolo 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 a solicitação do protocolo de push da Web siga as especificações. Entre outras coisas, a especificação afirma que a solicitação deve incluir determinados cabeçalhos e os dados precisam ser enviados como um fluxo de bytes.

No entanto, você precisa ter certeza de que está enviando o protocolo push da Web para o serviço push correto. Os dados PushSubscription que o navegador retornado a você durante o processo de inscrição oferece isso informações imprecisas ou inadequadas. 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 push. O caminho endpoint são 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, o que será explicado a seguir.

Criptografar a mensagem push

Os dados que você envia para um serviço de push precisam ser criptografados. Isso evita o serviço de push visualizar os dados que você está enviando ao cliente. Lembre-se de que o fornecedor do navegador decide qual serviço de push usar, e que o serviço de push pode, teoricamente, ser inseguro ou inseguro. Seu servidor deve usar o keys fornecido no PushSubscription para criptografar o protocolo de push da Web solicitações.

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

O serviço de push é uma maneira de impedir que outra pessoa envie mensagens para sua usuários. Tecnicamente você não precisa fazer isso, mas a implementação mais fácil Ele é necessário para o Chrome. 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 para o aplicativo. O processo de autenticação funciona da seguinte forma:

  • Você gera a chave privada e a pública como uma tarefa única. A combinação da chave privada e pública é conhecida como chaves do servidor de aplicativos. Eles também podem ser chamados de VAPID chaves. 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, 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 a chave privada.
  • Quando o serviço de push recebe sua solicitação de protocolo de push da Web, ele usa o chave pública 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 da 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 push ao cliente. Por exemplo, você pode personalizar:

  • O time to live (TTL) de uma mensagem, que define por quanto tempo o serviço de push deve tenta 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 somente mensagens de alta prioridade.
  • O tópico de uma mensagem, que substitui todas as mensagens pendentes do mesmo tópico com a mensagem mais recente.

Receber e exibir as mensagens enviadas como notificações

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

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

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

A mensagem chega ao dispositivo. O navegador ativa o service worker. O evento de push é despachado.

A seguir

Code labs