Como o push funciona

Antes de entrar na API, vamos dar uma olhada geral no push de um alto nível, do início ao fim. Em seguida, à medida que avançarmos nos tópicos ou nas APIs individuais, você vai ter uma ideia de como e por que eles são importantes.

As três principais etapas para a implementação de push são:

  1. Adicionar a lógica do lado do cliente para inscrever um usuário no envio por push (ou seja, o JavaScript e a interface no seu app da Web que registra um usuário para enviar mensagens).
  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 receberá um "evento push" quando o push chegar ao dispositivo. É nesse JavaScript que você pode mostrar uma notificação.

Vamos conferir em mais detalhes o que cada uma dessas etapas envolve.

Etapa 1: lado do cliente

A primeira etapa é "inscrever um usuário" no envio de mensagens por push.

A inscrição de um usuário requer duas coisas. Primeiro, conseguir a permissão do usuário para enviar mensagens push. Em segundo lugar, receber um PushSubscription do navegador.

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

Tudo isso é feito em JavaScript com a API Push.

Compatibilidade com navegadores

  • 42
  • 17
  • 44
  • 16

Origem

Antes de inscrever um usuário, você precisa gerar um conjunto de chaves do servidor de aplicativos. Falaremos sobre isso mais tarde.

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

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

Envie o PushSubscription para seu back-end.

Etapa 2: enviar uma mensagem push

Para enviar uma mensagem push para os usuários, é preciso fazer uma chamada de API para um serviço push. Essa chamada de API incluiria quais dados enviar, para quem enviar a mensagem e quaisquer critérios sobre como fazer isso. 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 faz?

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

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

Cada navegador pode usar o serviço de push que quiser. Os desenvolvedores não têm controle. Isso não é um problema, porque todo serviço de push espera a mesma chamada de API. Ou seja, você não precisa se preocupar com quem é o serviço de push, mas apenas se a chamada de API é válida.

Para conseguir 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.

Veja abaixo um exemplo dos valores que você recebe de uma PushSubscription:

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

Neste caso, o endpoint é [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". Assim que começar a trabalhar com push, você perceberá esse padrão.

As chaves na assinatura serão abordadas mais tarde.

Como é a API?

Eu disse que todos os serviços de push da Web esperam 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 de 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 realizar essa chamada de API e como fazer isso por conta própria.

O que a API faz?

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

Os dados enviados com uma mensagem push precisam ser criptografados. O motivo é que ele impede que os serviços de push, que podem ser qualquer pessoa, consigam visualizar os dados enviados com a mensagem push. Isso é importante, já que é o navegador que decide qual serviço de push usar, o que pode abrir a porta para navegadores usando um serviço de push não seguro ou protegido.

Quando você aciona uma mensagem push, o serviço push recebe a chamada de API e coloca a mensagem na fila. Essa mensagem 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:

  • A vida útil de uma mensagem push. Isso define por quanto tempo uma mensagem precisa ser colocada 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 do usuário entregando apenas mensagens de alta prioridade.

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

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

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

Depois que enviarmos uma mensagem push, o serviço push manterá 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 vai remover a mensagem da fila e ela nunca será entregue.

Quando o serviço de push entregar uma mensagem, o navegador receberá a mensagem, descriptografará todos os dados e enviará um evento push no service worker.

Um service worker é um arquivo JavaScript "especial". O navegador pode executar esse JavaScript sem que sua página seja aberta. Ele pode até mesmo executar esse JavaScript quando o navegador é 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 é possível executar qualquer tarefa em segundo plano. É possível fazer chamadas de análise, armazenar páginas em cache 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 das mensagens push.

A seguir

Laboratórios de códigos