Como o push funciona

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

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

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

Vamos analisar o que cada uma dessas etapas envolve com um pouco mais de detalhes.

Etapa 1: lado do cliente

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

Para inscrever um usuário, são necessárias duas coisas. Primeiro, receber permissão do usuário para enviar mensagens push. Em segundo lugar, receber uma PushSubscription do navegador.

Uma 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 para o dispositivo do usuário.

Tudo isso é feito em JavaScript com a API Push.

Antes de inscrever um usuário, você precisará gerar um conjunto de "chaves do servidor de aplicativos", que abordaremos mais adiante.

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

Depois de inscrever o usuário e ter uma PushSubscription, você precisará enviar os detalhes da 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.

Etapa 2: enviar uma mensagem push

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

Algumas perguntas que você pode estar fazendo:

• Quem e o que é o serviço push?
• Como é a API? É JSON, XML ou algo mais?
• O que a API pode fazer?

Quem e o que é o serviço push?

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

Cada navegador pode usar qualquer serviço push que quiser. Os desenvolvedores não têm controle sobre isso. Isso não é um problema porque cada serviço push espera 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 apropriado para acionar uma mensagem push (ou seja, o URL do serviço push), basta consultar o valor endpoint em uma 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=="
  }
}

Nesse caso, o endpoint é 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 de um usuário, indicado com "some-kind-of-unique-id-1234". Ao começar a trabalhar com o push, você vai notar esse padrão.

As chaves na assinatura serão abordadas mais adiante.

Como é a API?

Mencionei que cada serviço push da Web espera a mesma chamada de API. Essa API é o protocolo 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 determinados cabeçalhos sejam definidos e que os dados sejam um fluxo de bytes. Vamos analisar as bibliotecas que podem executar essa chamada de API para nós, bem como como fazer isso.

O que a API pode fazer?

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

Os dados enviados com uma mensagem push precisam ser criptografados. O motivo é que isso impede que os serviços push, que podem ser qualquer pessoa, visualizem os dados enviados com a mensagem push. Isso é importante, já que é 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 push possa entregar as mensagens. As instruções que você pode dar ao serviço push definem como a mensagem push é enfileirada.

As instruções incluem detalhes como:

• O tempo de vida de uma mensagem push. Isso define por quanto tempo uma mensagem deve ser enfileirada 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, entregando apenas mensagens de alta prioridade.

• Dê um nome de "tópico" a uma mensagem push que vai substituir qualquer mensagem pendente por essa nova mensagem.

Etapa 3: evento push no dispositivo do usuário

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

1. O dispositivo fica on-line e o serviço push entrega a mensagem.
2. 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 service worker que você pode realizar tarefas em segundo plano. Você pode fazer chamadas de análise, armazenar páginas em cache off-line e mostrar notificações.

Esse é todo o fluxo de mensagens push.

A seguir

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

Code labs

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