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:
- 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).
- A chamada de API do seu back-end / aplicativo que aciona uma mensagem push para o dispositivo de um usuário.
- 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.
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.
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.
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:
- O dispositivo fica on-line e o serviço de push entrega a mensagem.
- 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.
Esse é todo o fluxo de mensagens push.
A seguir
- Visão geral das notificações push na Web
- Como funciona a pressão
- Como inscrever um usuário
- UX de permissão
- Como enviar mensagens com bibliotecas push da Web
- Protocolo push na Web
- Como processar eventos de push
- Como exibir uma notificação
- Comportamento das notificações
- Padrões de notificação comuns
- Perguntas frequentes sobre notificações push
- Problemas comuns e como informar bugs