Esta página foi traduzida pela API Cloud Translation.

Como o push funciona

Matt Gaunt

Antes de entrar na API, vamos analisar o push de forma geral, do início ao fim. Depois, ao apresentarmos os tópicos ou APIs individuais mais adiante, você vai ter uma ideia de como e por que isso é importante.

As três etapas principais para implementar o push são:

Adicionar a lógica do lado do cliente para inscrever um usuário em push (ou seja, o JavaScript e a interface do usuário no app da Web que registra um usuário para mensagens push).
A chamada de API do back-end / aplicativo que aciona uma mensagem push no dispositivo de um usuário.
O arquivo JavaScript do service worker que vai receber um "evento push" quando ele chegar no dispositivo. É nesse JavaScript que você vai poder mostrar uma notificação.

Vamos conferir mais detalhes sobre cada uma dessas etapas.

Etapa 1: lado do cliente

A primeira etapa é "inscrever" um usuário para receber mensagens push.

A assinatura de um usuário requer duas coisas. Primeiro, peça permissão ao usuário para enviar notificações push. Em segundo lugar, como receber um PushSubscription do navegador.

Um PushSubscription contém todas as informações necessárias para enviar uma mensagem push a esse usuário. Você pode pensar nisso como um ID do dispositivo do usuário.

Tudo isso é feito em JavaScript com a API Push.

Compatibilidade com navegadores

Origem

Antes de assinar um usuário, você precisa gerar um conjunto de "chaves do servidor de aplicativos", que serão abordadas mais adiante.

As chaves do servidor do aplicativo, também conhecidas como chaves VAPID, são exclusivas do servidor. Elas permitem que um serviço push saiba qual servidor de aplicativo inscreveu um usuário e garante que ele seja o mesmo servidor que aciona as mensagens push para esse usuário.

Depois de assinar o usuário e ter um PushSubscription, você precisará enviar os detalhes do PushSubscription para o back-end / servidor. No servidor, você vai salvar essa assinatura em um banco de dados e usá-la para enviar uma mensagem push a esse usuário.

Envie a PushSubscription para o back-end.

Etapa 2: enviar uma mensagem push

Quando você quiser enviar uma mensagem push aos usuários, faça uma chamada de API para um serviço push. Essa chamada de API incluiria quais dados enviar, para quem enviar a mensagem e qualquer critério sobre como enviar a mensagem. Normalmente, essa chamada de API é feita pelo seu servidor.

Algumas perguntas que você pode fazer:

O que é o serviço push?
Como é a API? JSON, XML ou outra coisa?
O que a API pode fazer?

O que é o serviço push?

Um serviço push recebe uma solicitação de rede, a valida e envia uma mensagem push ao navegador apropriado. Se o navegador estiver off-line, a mensagem será enfileirada até que ele fique on-line.

Cada navegador pode usar qualquer serviço push que quiser. Isso é algo que os desenvolvedores não controlam. Isso não é um problema, porque todos os serviços de push esperam a mesma chamada de API. Isso significa que você não precisa se preocupar com quem é o serviço push. Basta garantir que a chamada de API seja válida.

Para receber o URL adequado para acionar uma mensagem push (ou seja, o URL do serviço push), basta verificar o valor endpoint em um PushSubscription.

Confira abaixo um exemplo dos valores que você vai receber de uma PushSubscription:

{
  "endpoint": "https://random-push-service.com/some-kind-of-unique-id-1234/v2/",
  "keys": {
    "p256dh": "BNcRdreALRFXTkOOUHK1EtK2wtaz5Ry4YfYCA_0QTpQtUbVlUls0VJXg7A8u-Ts1XbjhazAkj7I99e8QcYP7DkM=",
    "auth": "tBHItJI5svbpez7KI4CCXg=="
  }
}

O endpoint nesse caso é [https://random-push-service.com/some-kind-of-unique-id-1234/v2/]. O serviço push seria 'random-push-service.com', e cada endpoint é exclusivo para um usuário, indicado com 'some-kind-of-unique-id-1234'. Ao começar a trabalhar com push, você vai notar esse padrão.

As chaves na assinatura serão abordadas mais tarde.

Como é a API?

Mencionei que todos os serviços de push da Web esperam a mesma chamada de API. Essa API é o Protocolo de push da Web. É um padrão IETF que define como fazer uma chamada de API para um serviço push.

A chamada de API exige que alguns cabeçalhos sejam definidos e que os dados sejam um fluxo de bytes. Vamos conferir as bibliotecas que podem realizar essa chamada de API e como fazer isso por conta própria.

O que a API pode fazer?

A API oferece uma maneira de enviar uma mensagem para um usuário, com ou sem dados, e fornece instruções sobre como enviar a mensagem.

Os dados enviados com uma mensagem push precisam ser criptografados. O motivo é que isso impede que serviços push, que podem ser qualquer pessoa, acessem os dados enviados com a mensagem push. Isso é importante porque é o navegador que decide qual serviço push usar, o que pode abrir a porta para navegadores que usam um serviço push que não é seguro.

Quando você aciona uma mensagem push, o serviço push recebe a chamada de API e enfileira a mensagem. Essa mensagem vai permanecer na fila até que o dispositivo do usuário fique on-line e o serviço de push possa entregar as mensagens. As instruções que você pode fornecer ao serviço push definem como a mensagem push é enfileirada.

As instruções incluem detalhes como:

O tempo de vida útil de uma mensagem push. Isso define por quanto tempo uma mensagem precisa ficar na fila antes de ser removida e não entregue.
Defina a urgência da mensagem. Isso é útil caso o serviço push esteja preservando a duração da bateria dos usuários ao enviar apenas mensagens de alta prioridade.
Dê um nome de "tema" a uma mensagem push que vai substituir qualquer mensagem pendente por essa nova mensagem.

Quando o servidor quer enviar uma mensagem push, ele faz uma solicitação de protocolo de push da Web para um serviço push.

Etapa 3: enviar o evento ao dispositivo do usuário

Depois de enviar uma mensagem push, o serviço push vai manter a mensagem no servidor até que um dos seguintes eventos ocorra:

O dispositivo fica on-line e o serviço push entrega a mensagem.
A mensagem expira. Se isso ocorrer, o serviço push vai remover a mensagem da fila e ela nunca será entregue.

Quando o serviço push entrega uma mensagem, o navegador a recebe, descriptografa todos os dados e envia um evento push no service worker.

Um service worker é um arquivo JavaScript "especial". O navegador pode executar esse JavaScript sem que a página esteja aberta. Ele pode até mesmo executar esse JavaScript quando o navegador está fechado. Um service worker também tem APIs, como push, que não estão disponíveis na página da Web (ou seja, APIs que não estão disponíveis fora de um script de service worker).

É dentro do evento "push" do worker do serviço que você pode realizar tarefas em segundo plano. É possível fazer chamadas de análise, armazenar páginas em cache off-line e mostrar notificações.

Quando uma mensagem push é enviada de um serviço push para o dispositivo de um usuário, o service worker recebe um evento push.

Esse é o fluxo completo de mensagens push.