Codelab: Compila un servidor de notificaciones push

Kate Jeffreys
Kate Jeffreys
Kayce Basques
Kayce Basques
X GitHub

En este codelab, se muestra paso a paso cómo compilar un servidor de notificaciones push. Al final del codelab, tendrás un servidor que hará lo siguiente:

  • Realiza un seguimiento de las suscripciones a notificaciones push (es decir, el servidor crea un nuevo registro de base de datos cuando un cliente habilita las notificaciones push y borra un registro de base de datos existente cuando un cliente las inhabilita).
  • Envía una notificación push a un solo cliente
  • Envía una notificación push a todos los clientes suscritos

Este codelab se enfoca en ayudarte a aprender a través de la práctica y no explica muchos conceptos. Consulta ¿Cómo funcionan las notificaciones push? para obtener información sobre los conceptos de las notificaciones push.

El código del cliente de este codelab ya está completo. En este codelab, solo implementarás el servidor. Para aprender a implementar un cliente de notificaciones push, consulta el Codelab: Compila un cliente de notificaciones push.

Compatibilidad del navegador

Se sabe que este codelab funciona con las siguientes combinaciones de sistema operativo y navegador:

  • Windows: Chrome, Edge
  • macOS: Chrome y Firefox
  • Android: Chrome y Firefox

Se sabe que este codelab no funciona con los siguientes sistemas operativos (o combinaciones de sistema operativo y navegador):

  • macOS: Brave, Edge y Safari
  • iOS

Pila de la aplicación

  • El servidor se compila sobre Express.js.
  • La biblioteca de Node.js web-push controla toda la lógica de las notificaciones push.
  • Los datos de suscripción se escriben en un archivo JSON con lowdb.

No es necesario que uses ninguna de estas tecnologías para implementar notificaciones push. Elegimos estas tecnologías porque brindan una experiencia de codelab confiable.

Configuración

Configura la autenticación

Antes de que las notificaciones push funcionen, debes configurar tu servidor y cliente con claves de autenticación. Consulta Cómo firmar tus solicitudes de protocolo web push para obtener más información.

  1. Abre la terminal.
  2. En la terminal, ejecuta npx web-push generate-vapid-keys. Copia los valores de la clave privada y la clave pública.
  3. Abre .env y actualiza VAPID_PUBLIC_KEY y VAPID_PRIVATE_KEY. Establece VAPID_SUBJECT en mailto:[email protected]. Todos estos valores deben estar entre comillas dobles. Después de realizar las actualizaciones, tu archivo .env debería verse de la siguiente manera:
VAPID_PUBLIC_KEY="BKiwTvD9HA…" VAPID_PRIVATE_KEY="4mXG9jBUaU…" VAPID_SUBJECT="mailto:[email protected]"
  1. Abre public/index.js.
  2. Reemplaza VAPID_PUBLIC_KEY_VALUE_HERE por el valor de tu clave pública.

Administrar las suscripciones

Tu cliente controla la mayor parte del proceso de suscripción. Las principales acciones que debe realizar tu servidor son guardar las suscripciones nuevas a las notificaciones push y borrar las suscripciones antiguas. Estas suscripciones son las que te permiten enviar mensajes a los clientes en el futuro. Consulta Cómo suscribir el cliente a las notificaciones push para obtener más contexto sobre el proceso de suscripción.

Guardar la información de la suscripción nueva

  1. Haz clic en Registrar trabajador de servicio en la pestaña de la app. En el cuadro de estado, deberías ver un mensaje similar a este:
Service worker registered. Scope: https://example.com
  1. En la pestaña de la app, haz clic en Subscribe to push. Es probable que tu navegador o sistema operativo te pregunte si quieres permitir que el sitio web te envíe notificaciones push. Haz clic en Permitir (o la frase equivalente que use tu navegador o SO). En el cuadro de estado, deberías ver un mensaje similar a este:
Service worker subscribed to push.  Endpoint: https://fcm.googleapis.com/fcm/send/…
  1. Abre la terminal para ver los registros. Deberías ver /add-subscription seguido de algunos datos. /add-subscription es la URL a la que el cliente envía una solicitud POST cuando desea suscribirse a las notificaciones push. Los datos que siguen son la información de suscripción del cliente que debes guardar.
  2. Abre server.js.
  3. Actualiza la lógica del controlador de rutas /add-subscription con el siguiente código:
app.post('/add-subscription', (request, response) => {   console.log('/add-subscription');   console.log(request.body);   console.log(`Subscribing ${request.body.endpoint}`);   db.get('subscriptions')     .push(request.body)     .write();   response.sendStatus(200); });

Borra la información de suscripción anterior

  1. Regresa a la pestaña de la app.
  2. Haz clic en Anular la suscripción a las notificaciones push.
  3. Vuelve a consultar los registros. Deberías ver /remove-subscription seguido de la información de la suscripción del cliente.
  4. Actualiza la lógica del controlador de rutas /remove-subscription con el siguiente código:
app.post('/remove-subscription', (request, response) => {   console.log('/remove-subscription');   console.log(request.body);   console.log(`Unsubscribing ${request.body.endpoint}`);   db.get('subscriptions')     .remove({endpoint: request.body.endpoint})     .write();   response.sendStatus(200); });

Envíe notificaciones

Como se explica en Envía un mensaje push, tu servidor no envía los mensajes push directamente a los clientes. En cambio, se basa en un servicio de envío para hacerlo. Básicamente, tu servidor solo inicia el proceso de envío de mensajes a los clientes realizando solicitudes de servicios web (solicitudes del protocolo de envío web) a un servicio web (el servicio de envío) que pertenece al proveedor del navegador que usa tu usuario.

  1. Actualiza la lógica del controlador de rutas /notify-me con el siguiente código:
app.post('/notify-me', (request, response) => {   console.log('/notify-me');   console.log(request.body);   console.log(`Notifying ${request.body.endpoint}`);   const subscription =        db.get('subscriptions').find({endpoint: request.body.endpoint}).value();   sendNotifications([subscription]);   response.sendStatus(200); });
  1. Actualiza la función sendNotifications() con el siguiente código:
function sendNotifications(subscriptions) {   // TODO   // Create the notification content.   const notification = JSON.stringify({     title: "Hello, Notifications!",     options: {       body: `ID: ${Math.floor(Math.random() * 100)}`     }   });   // Customize how the push service should attempt to deliver the push message.   // And provide authentication information.   const options = {     TTL: 10000,     vapidDetails: vapidDetails   };   // Send a push message to each client specified in the subscriptions array.   subscriptions.forEach(subscription => {     const endpoint = subscription.endpoint;     const id = endpoint.substr((endpoint.length - 8), endpoint.length);     webpush.sendNotification(subscription, notification, options)       .then(result => {         console.log(`Endpoint ID: ${id}`);         console.log(`Result: ${result.statusCode}`);       })       .catch(error => {         console.log(`Endpoint ID: ${id}`);         console.log(`Error: ${error} `);       });   }); }
  1. Actualiza la lógica del controlador de rutas /notify-all con el siguiente código:
app.post('/notify-all', (request, response) => {   console.log('/notify-all');   response.sendStatus(200);   console.log('Notifying all subscribers');   const subscriptions =       db.get('subscriptions').cloneDeep().value();   if (subscriptions.length > 0) {     sendNotifications(subscriptions);     response.sendStatus(200);   } else {     response.sendStatus(409);   } });
  1. Regresa a la pestaña de la app.
  2. Haz clic en Notificarme. Deberías recibir una notificación push. El título debe ser Hello, Notifications! y el cuerpo debe ser ID: <ID>, donde <ID> es un número aleatorio.
  3. Abre tu app en otros navegadores o dispositivos, intenta suscribirlos a las notificaciones push y, luego, haz clic en el botón Notificar a todos. Deberías recibir la misma notificación en todos los dispositivos a los que te suscribiste (es decir, el ID en el cuerpo de la notificación push debería ser el mismo).

Próximos pasos