Últimamente, he estado trabajando en un nuevo paquete webpush creado desde cero utilizando únicamente API web. Esto hace posible (al menos en teoría) enviar mensajes Web Push directamente desde su navegador.

Esta entrada de blog tiene como objetivo explicar qué es el protocolo Web Push, cómo funciona
(RFC 8291) y cómo enviar mensajes Web Push usando mi biblioteca.

¿Qué es el protocolo Web Push?

El protocolo Web Push es un protocolo intermedio que permite que una aplicación envíe mensajes a un agente de usuario (normalmente un navegador).

Es similar a los eventos enviados por el servidor (SSE) en el sentido de que los mensajes se envían al agente de usuario, pero tiene un propósito diferente. Los mensajes Web Push no requieren que los sitios web tengan una pestaña abierta como trabajadores del servicio
Puede escuchar mensajes push. Funciona en segundo plano.

¿Cómo funciona el protocolo Web Push?

El protocolo Web Push involucra a tres actores:

• Agente de usuario: el navegador que normalmente utiliza el visitante de su sitio web
• Servicio Push: servidor push mantenido y propiedad de Google, Mozilla o Apple dependiendo del navegador
• Servidor de aplicaciones: tu servidor

Aquí hay una descripción general de las interacciones entre ellos:

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



Se requiere un servicio push intermedio por múltiples motivos.

En primer lugar, reduce el ancho de banda y el uso de la batería, ya que los agentes de usuario mantienen una sola conexión para todos los sitios web en lugar de una por sitio web.

También mejora la escalabilidad y la confiabilidad, ya que los servicios push de los principales navegadores están diseñados para manejar millones de usuarios. Debido a que los mensajes push deben conservarse si el agente de usuario está fuera de línea, crear un servicio push requiere mucha ingeniería, una infraestructura resiliente y redundante

Por último, crear, implementar y mantener un servicio push personalizado suele ser demasiado complejo y requiere muchos recursos para las pequeñas empresas web. Esto daría a las corporaciones más grandes una ventaja competitiva injusta, ya que tendrían los recursos necesarios para desarrollar y perfeccionar sus propios servicios de inserción.

Si eres un usuario preocupado por la privacidad como yo, consulta un servicio intermediario

recibir todos los mensajes genera señales de alerta. Para abordar esta inquietud, Web Push

Los mensajes están protegidos mediante codificación de contenido cifrado HTTP (consulte mi 

paquete http-ece), asegurando que

La información confidencial permanece protegida y es ilegible para terceros

servicios en tránsito.

  
  
  Configuración


Es posible que hayas notado que la flecha de configuración es diferente a otras en el gráfico ASCII anterior. Esto se debe a que la fase de configuración depende de la implementación. Todos los principales navegadores implementan javascript

Insertar API en un

Manera diferente. Un método PushManager.subscribe() que devuelve un estándar

PushSubscription está expuesto.

Las suscripciones siempre contienen un punto final URL único asociado con la suscripción push y una clave pública utilizada para cifrar mensajes.

Al crear una suscripción, se puede proporcionar una applicationServerKey opcional para identificar los mensajes push del servidor de aplicaciones. Este es el método de autenticación de identificación voluntaria del servidor de aplicaciones (VAPID)

(RFC 8292). Las claves VAPID se utilizan para mitigar los ataques DDOS en servicios push. Además, agregar autenticación entre el servidor de aplicaciones y el servicio push reduce los riesgos de fuga del punto final de suscripción. Por estos motivos, son obligatorios en Firefox.

  
  
  Proporcionar suscripción


El segundo paso es enviar la suscripción al servidor de aplicaciones para que pueda comenzar a enviar mensajes.

El servidor de aplicaciones normalmente almacenará la suscripción en una base de datos para su posterior reutilización.

  
  
  mensaje push


Finalmente, para enviar un mensaje, el servidor de aplicaciones envía una solicitud HTTP cifrada con un esquema de autenticación insípido si se proporcionó applicationServerKey para crear la suscripción.

Si el agente de usuario está en línea cuando el mensaje se recibe mediante el servicio push, es

reenviado. De lo contrario, se almacena hasta que el agente de usuario se conecte o caduque el mensaje.

Cuando el agente de usuario recibe un mensaje, ejecuta el controlador de eventos push que se usa principalmente para mostrar una notificación y eso es todo.

  
  
  Configurar un servidor de aplicaciones usando webpush


Primero debes generar claves VAPID ya que algunos navegadores las hacen obligatorias:



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




Copie el resultado y guárdelo en un archivo; no necesita generar claves VAPID nuevamente.

En el código de su servidor de aplicaciones, puede cargarlos de la siguiente manera:



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));




Luego, necesitarás crear una instancia de 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,
});




Luego, para enviar mensajes push, simplemente crea un PushSubscriber y llámalo

método pushMessage()/pushTextMessage() de la siguiente manera:



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, {});
  }
}




¡Eso es todo, estás enviando mensajes push a tus suscriptores!

el repositorio webpush contiene un ejemplo interactivo con código similar que puedes ejecutar localmente. También contiene código javascript del lado del cliente, ¡así que asegúrese de revisarlo!