Ultimamente, tenho trabalhado em um novo pacote webpush criado do zero usando apenas APIs da Web. Isso torna possível (pelo menos teoricamente) enviar mensagens Web Push diretamente do seu navegador.

Esta postagem do blog tem como objetivo explicar o que é o protocolo Web Push, como ele funciona
(RFC 8291) e como enviar mensagens Web Push usando minha biblioteca.

O que é o protocolo Web Push?

O protocolo Web Push é um protocolo intermediário que permite que um aplicativo envie mensagens para um agente de usuário (normalmente um navegador).

É semelhante aos eventos enviados pelo servidor (SSE), no sentido de que as mensagens são enviadas ao agente do usuário, mas servem a um propósito diferente. As mensagens Web Push não exigem que os sites tenham uma guia aberta como service workers
pode ouvir mensagens push. Funciona em segundo plano.

Como funciona o protocolo Web Push?

O protocolo Web Push envolve três atores:

• User-Agent: o navegador do visitante do seu site normalmente
• Push Service: servidor push mantido e de propriedade do Google, Mozilla ou Apple dependendo do navegador
• Servidor de aplicativos: seu servidor

Aqui está uma visão geral das interações entre eles:

     -------             --------------         ------------- 
    |  UA   |           | Push Service |       | Application |
     -------             --------------         ------------- 
        |                      |                      |
        |        Setup         |                      |
        ||                      |
        |           Provide Subscription              |
        |-------------------------------------------->|
        |                      |                      |
        :                      :                      :
        |                      |     Push Message     |
        |    Push Message      |



Um serviço push intermediário é necessário por vários motivos.

Primeiro, reduz a largura de banda e o uso da bateria, pois os agentes do usuário mantêm apenas uma única conexão para todos os sites, em vez de uma por site.

Ele também melhora a escalabilidade e a confiabilidade, já que os serviços push dos principais navegadores são projetados para lidar com milhões de usuários. Como as mensagens push devem ser retidas se o agente do usuário estiver offline, construir um serviço push requer muita engenharia, uma infraestrutura resiliente e redundante

Finalmente, construir, implantar e manter um serviço push personalizado costuma ser muito complexo e consome muitos recursos para pequenas empresas da web. Isto daria às grandes empresas uma vantagem competitiva injusta, uma vez que teriam os recursos necessários para desenvolver e aperfeiçoar os seus próprios serviços push.

Se você é um usuário preocupado com a privacidade como eu, procurando um serviço intermediário

receber todas as mensagens levanta bandeiras vermelhas. Para resolver esta preocupação, Web Push

as mensagens são protegidas por meio de codificação de conteúdo criptografado HTTP (veja meu 

pacote http-ece), garantindo que

informações confidenciais permanecem protegidas e ilegíveis para terceiros

serviços em trânsito.

  
  
  Configurar


Você deve ter notado que a seta de configuração é diferente das outras no gráfico ASCII acima. Isso ocorre porque a fase de configuração depende da implementação. Todos os principais navegadores implementam o javascript

Enviar API em um

maneira diferente. Um método PushManager.subscribe() que retorna um padrão

PushSubscription é exposto.

As assinaturas sempre contêm um endpoint de URL exclusivo associado à assinatura push e uma chave pública usada para criptografar mensagens.

Ao criar uma assinatura, um applicationServerKey opcional pode ser fornecido para identificar mensagens push do servidor de aplicativos. Este é o método de autenticação Voluntary Application Server Identification (VAPID)

(RFC 8292). As chaves VAPID são usadas para mitigar ataques DDOS em serviços push. Além disso, adicionar autenticação entre o servidor de aplicativos e o serviço push reduz os riscos de vazamento do endpoint de assinatura. Por estes motivos, eles são obrigatórios no Firefox.

  
  
  Fornecer assinatura


O segundo passo é enviar a assinatura ao servidor da aplicação para que ele possa começar a enviar mensagens.

O servidor de aplicativos normalmente armazena a assinatura em um banco de dados para reutilização posterior.

  
  
  Mensagem push


Finalmente, para enviar uma mensagem, o servidor de aplicativos envia uma solicitação HTTP criptografada com um esquema de autenticação insípido se applicationServerKey foi fornecido para criar a assinatura.

Se o agente do usuário estiver online quando a mensagem for recebida pelo serviço push, é

encaminhado. Caso contrário, ele será armazenado até que o agente do usuário fique online ou a mensagem expire.

Quando o agente do usuário recebe uma mensagem, ele executa o manipulador de eventos push que é usado principalmente para exibir uma notificação e pronto.

  
  
  Configurando um servidor de aplicativos usando webpush


Primeiro você deve gerar chaves VAPID, pois alguns navegadores as tornam obrigatórias:



$ deno run https://raw.githubusercontent.com/negrel/webpush/master/cmd/generate-vapid-keys.ts




Copie a saída e salve-a em um arquivo, você não precisa gerar chaves VAPID novamente.

No código do servidor de aplicativos, você pode carregá-los da seguinte maneira:



import * as webpush from "jsr:@negrel/webpush";

// Read generated VAPID file.
const vapidKeysJson = Deno.readTextFileSync("./path/to/vapid.json");

// Import VAPID keys.
webpush.importVapidKeys(JSON.parse(vapidKeysJson));




Então, você precisará criar uma instância do objeto ApplicationServer.



// adminEmail is used by Push services maintainer to contact you in case there
// is problem with your application server.
const adminEmail = "[email protected]";

// Create an application server object.
const appServer = await webpush.ApplicationServer.new({
  contactInformation: "mailto:"   adminEmail,
  vapidKeys,
});




Então, para enviar mensagens push, basta criar um PushSubscriber e chamar seu

Método pushMessage()/pushTextMessage() como segue:



const subsribers = [];

// HTTP handler for user agent sending their subscription.
function subscribeHandler(req) {
  // Extract subscription send by user agent.
  const subscription = await req.json();

  // Store subscription in db.
  // ...

  // Create a subscriber object.
  const sub = appServer.subscribe(subscription);

  // Store subscriber in memory.
  subscribers.push(sub);
}

// Helper method to send message to all subscribers.
function broadcastMessage(msg) {
  for (const sub of subscribes) {
    sub.pushTextMessage(msg, {});
  }
}




É isso, você está enviando mensagens push para seus assinantes!

O repositório 
webpush contém um exemplo interativo com código semelhante que você pode executar localmente. Ele também contém código javascript do lado do cliente, então não deixe de conferir!