Como o push funciona

Matt Gaunt

Antes de entrar na API, vamos analisar o push de forma geral, do início ao fim. Depois, quando abordarmos tópicos ou APIs individuais, você vai entender 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 para receber notificações push (ou seja, o JavaScript e a interface no seu app da Web que registra um usuário para receber mensagens push).
2. A chamada de API do seu 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 em mais detalhes.

Etapa 1: lado do cliente

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

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

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

Tudo isso é feito em JavaScript com a API Push.

Browser Support

• 42
• 17
• 44
• 16

Source

Antes de inscrever um usuário, você precisa gerar um conjunto de "chaves do servidor de aplicativos", que vamos abordar 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 de push saiba qual servidor de aplicativos inscreveu um usuário e garantem que seja o mesmo servidor que aciona as mensagens push para esse usuário.

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

Etapa 2: enviar uma mensagem push

Para enviar uma mensagem push aos usuários, é preciso fazer uma chamada de API para um serviço de push. Essa chamada de API inclui os dados a serem enviados, o destinatário da mensagem e os critérios de envio. Normalmente, essa chamada de API é feita pelo seu servidor.

Algumas perguntas que você pode estar se fazendo:

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

Quem e o que é o serviço de push?

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

Cada navegador pode usar o serviço de push que quiser, algo que os desenvolvedores não podem controlar. 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 o serviço de 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 de push), basta analisar 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 de 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 adiante.

Como é a API?

Mencionei que todo serviço de push da Web espera a mesma chamada de API. Essa API é o protocolo de push da Web. É um padrão da IETF que define como fazer uma chamada de API para um serviço de push.

A chamada de API exige que determinados cabeçalhos sejam definidos e que os dados sejam um stream de bytes. Vamos analisar as bibliotecas que podem realizar essa chamada de API para nós, além de 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 os serviços de push, que podem ser qualquer pessoa, visualizem os dados enviados com a mensagem push. Isso é importante porque é o navegador que decide qual serviço de push usar, o que pode abrir as portas para navegadores que usam um serviço de push que não é seguro.

Quando você aciona uma mensagem push, o serviço de push recebe a chamada de API e coloca a mensagem na fila. 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 dar ao serviço de push definem como a mensagem push é colocada na fila.

As instruções incluem detalhes como:

• O time to live (TTL) de uma mensagem push. Isso define por quanto tempo uma mensagem deve ficar na fila antes de ser removida e não entregue.

• Defina a urgência da mensagem. Isso é útil caso o serviço de push esteja preservando a duração da bateria dos usuários ao enviar apenas mensagens de alta prioridade.

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

Etapa 3: evento de push no dispositivo do usuário

Depois que enviamos uma mensagem push, o serviço de push mantém a mensagem no servidor até que um dos seguintes eventos ocorra:

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

Quando o serviço de push entrega uma mensagem, o navegador a recebe, descriptografa 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 sua página esteja aberta. Ele pode até 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 qualquer tarefa em segundo plano. É possível fazer chamadas de análise, armazenar páginas em cache off-line e mostrar notificações.

Esse é o fluxo completo para 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 de push da Web
• Protocolo de push da Web
• Como processar eventos push
• Como mostrar uma notificação
• Comportamento das notificações
• Padrões comuns de notificação
• Perguntas frequentes sobre notificações push
• Problemas comuns e como informar bugs

Code labs

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