Como o push funciona

Antes de entrarmos na API, vamos ver o envio em detalhes, do início ao fim. Então, enquanto passo por tópicos individuais ou APIs mais tarde, você terá uma ideia de como e por que é muito importante.

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

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

Vamos conferir mais detalhes sobre cada uma dessas etapas.

Etapa 1: lado do cliente

A primeira etapa é "inscrever-se" que um usuário envie mensagens por push.

Inscrever um usuário requer duas coisas. Primeiro, conseguir permissão do usuário para enviar as mensagens push. Segundo, recebendo um PushSubscription do navegador.

Uma PushSubscription contém todas as informações necessárias para enviar uma mensagem push a esse usuário. Você pode "de certa forma" pense nele como um ID para o dispositivo do usuário.

Tudo isso é feito em JavaScript com a API Push.

Compatibilidade com navegadores

  • Chrome: 42.
  • Borda: 17.
  • Firefox: 44.
  • Safari: 16.

Origem

Antes de inscrever um usuário, é preciso 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 para seu servidor. Eles permitem que push para saber qual servidor de aplicativos inscreveu um usuário e garantir que é o mesmo que aciona as mensagens push para esse usuário.

Depois de inscrever o usuário e ter um PushSubscription, você precisa enviar o Detalhes de PushSubscription para seu back-end / servidor. No seu servidor, salve assinatura em um banco de dados e usá-la para enviar uma mensagem push para esse usuário.

Envie a PushSubscription para seu back-end.

Etapa 2: enviar uma mensagem push

Para enviar uma mensagem push aos usuários, você precisa fazer uma chamada de API para um serviço. Essa chamada de API incluiria quais dados enviar, para quem enviar a mensagem e quaisquer critérios de como enviar a mensagem. Normalmente, essa chamada de API é feita no seu servidor.

Estas são algumas perguntas que você pode estar fazendo a si mesmo:

  • Quem e o que é o serviço de push?
  • Como é a API? É JSON, XML ou alguma 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, a valida e envia uma mensagem de push ao navegador apropriado. Se o navegador estiver off-line, a mensagem ficará na fila até que o navegador fique on-line.

Cada navegador pode usar o serviço de push que quiserem. É algo que os desenvolvedores não têm controle. de novo. Isso não é um problema porque cada serviço de push espera a mesma chamada de API. Significado você não precisa se preocupar com quem é o serviço de push. Você só precisa garantir que sua chamada de API é válido.

Para conseguir o URL apropriado para acionar uma mensagem push (ou seja, o URL do serviço de push), você basta observar 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=="
  }
}

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

As chaves na assinatura serão abordadas posteriormente.

Como é a API?

Eu mencionei que todo serviço de push da Web espera a mesma chamada de API. Essa API é a 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 veremos as bibliotecas que podem realizar essa chamada de API para nós e como fazer isso por conta própria.

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. A razão para isso é que impede que serviços push, seja qualquer pessoa, visualizem os dados enviados com o mensagem push. Isso é importante porque é o navegador que decide qual serviço de push deve uso, o que poderia abrir as portas para navegadores que usam um serviço de push não seguro ou protegido.

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

As instruções incluem detalhes como:

  • O time to live de uma mensagem push. Isso define por quanto tempo uma mensagem deve ser colocada na fila antes ele é removido e não é exibido.

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

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

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

Etapa 3: enviar o evento por push no dispositivo do usuário

Depois de enviar uma mensagem de push, o serviço de push manterá a sua mensagem no seu servidor até um dos seguintes eventos ocorre:

  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 push removerá a mensagem da fila e ele nunca será entregue.

Quando o serviço de push entrega uma mensagem, o navegador a recebe, descriptografa dados e enviar um evento push no seu service worker.

Um service worker é "especial" JavaScript. O navegador pode executar esse JavaScript sem que sua página seja aberta. Ele pode até mesmo executar esse JavaScript quando o navegador for 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).

Ele está dentro do "push" para executar qualquer tarefa em segundo plano. Você pode 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 de push para o dispositivo de um usuário, seu service worker recebe um evento de push

Esse é todo o fluxo de mensagens push.

A seguir

Code labs