Codelab: Compila un servidor de notificaciones push

Kate Jeffreys
Kate Jeffreys
Kayce Basques
Kayce Basques
X GitHub Error

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 inhabilita esta opción).
  • 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 haciendo y no habla mucho sobre los 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. Solo implementarás el servidor en este codelab. Para obtener información sobre cómo implementar un cliente de notificaciones push, consulta el codelab: Compila un cliente de notificaciones push.

Consulta push-notifications-server-codelab-complete (source) para ver el código completo.

Compatibilidad del navegador

Este codelab funciona con las siguientes combinaciones de sistema operativo y navegador:

  • Windows: Chrome y 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 aplicaciones

  • El servidor se compila en 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 proporcionan una experiencia de codelab confiable.

Configuración

Obtén una copia editable del código

El editor de código que ves a la derecha de estas instrucciones se llamará IU de Glitch a lo largo de este codelab.

  1. Haz clic en Remix to Edit para que el proyecto sea editable.

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 conocer el motivo.

  1. Para abrir la terminal de Glitch, haz clic en Tools y, luego, en 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:test@test.test. Todos estos valores deben estar entre comillas dobles. Después de realizar las actualizaciones, el archivo .env debería verse de la siguiente manera:
VAPID_PUBLIC_KEY="BKiwTvD9HA…"
VAPID_PRIVATE_KEY="4mXG9jBUaU…"
VAPID_SUBJECT="mailto:test@test.test"
  1. Cierra la terminal de Glitch.
  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. Lo principal que debe hacer tu servidor es guardar suscripciones nuevas de notificaciones push y borrar las suscripciones anteriores. Estas suscripciones te permiten enviar mensajes a los clientes en el futuro. Consulta Cómo suscribir al cliente a notificaciones push para obtener más información sobre el proceso de suscripción.

Guarda la información de la nueva suscripción

  1. Para obtener una vista previa del sitio, presiona Ver app. Luego, presiona Pantalla completa pantalla completa.
  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 al siguiente:
Service worker registered. Scope: https://desert-cactus-sunset.glitch.me/
  1. En la pestaña de la app, haz clic en Suscribirse a notificaciones 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 cualquier frase equivalente que use tu navegador o SO). En el cuadro de estado, deberías ver un mensaje similar al siguiente:
Service worker subscribed to push.  Endpoint: https://fcm.googleapis.com/fcm/send/…
  1. Para volver a tu código, haz clic en Ver código fuente en la IU de Glitch.
  2. Para abrir los registros de Glitch, haz clic en Tools y, luego, en Logs. 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.
  3. Abre server.js.
  4. 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 la suscripción anterior

  1. Regresa a la pestaña de la app.
  2. Haz clic en Anular la suscripción a los mensajes push.
  3. Vuelve a consultar los registros de fallas. 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 Cómo enviar un mensaje push, tu servidor no envía los mensajes push directamente a los clientes. En cambio, depende de un servicio push para hacerlo. Básicamente, tu servidor solo inicia el proceso de enviar mensajes a los clientes mediante solicitudes de servicio web (solicitudes de protocolo de notificaciones push web) a un servicio web (el servicio push) 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 Anular la suscripción a las notificaciones push y, luego, vuelve a hacer clic en Suscribirse a las notificaciones push. Esto solo es necesario porque, como se mencionó antes, Glitch reinicia el proyecto cada vez que editas el código y el proyecto está configurado para borrar la base de datos al inicio.
  3. 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.
  4. Abre la app en otros navegadores o dispositivos y prueba 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 debe ser el mismo).

Próximos pasos