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 sistemas operativos y navegadores:

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

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 confiable en el codelab.

Configuració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. En la terminal, ejecuta npx web-push generate-vapid-keys. Copia los valores de la clave privada y la clave pública.

  2. 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, tu archivo .env debería verse de la siguiente manera:

    VAPID_PUBLIC_KEY="BKiwTvD9HA…"
VAPID_PRIVATE_KEY="4mXG9jBUaU…"
VAPID_SUBJECT="mailto:test@test.test"

  3. Abre public/index.js.

  4. 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 tareas que debe realizar tu servidor son guardar suscripciones nuevas a notificaciones push y borrar las suscripciones antiguas. Estas suscripciones son las que te permiten enviar mensajes a los clientes en el futuro.

Lee Cómo suscribir al cliente a las notificaciones push para obtener más contexto sobre el proceso de suscripción.

Cómo guardar la información de una 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

  2. En la pestaña de la app, haz clic en Subscribe to push. Es posible que tu navegador o sistema operativo te pregunten si quieres permitir que el sitio web te envíe notificaciones push.

  3. Haz clic en Permitir (o la frase equivalente que use tu navegador o sistema operativo). En el cuadro de estado, deberías ver un mensaje como este:

    Service worker subscribed to push.  Endpoint: https://fcm.googleapis.com/fcm/send/…

  4. 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.

  5. Abre server.js.

  6. 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 lo siguiente:

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

  2. Actualiza la función sendNotifications() con el siguiente código:

    function sendNotifications(subscriptions) {
  // 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} `);
      });
  });
}

  3. 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);
  }
});

  4. Regresa a la pestaña de la app.

  5. 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.

  6. Abre la app en otros navegadores o dispositivos compatibles. Intenta suscribirte 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.

Próximos pasos