Codelab: Compila un servidor de notificaciones push

Kate Jeffreys

Kayce Basques

Para seguir este codelab, abre este error en una segunda pestaña.

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

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

Este codelab se enfoca en ayudarte a aprender mediante la práctica y no trata mucho de los conceptos. Consulta ¿Cómo funcionan las notificaciones push? para conocer los conceptos de las notificaciones push.

El código de cliente de este codelab ya está completo. Solo implementarás el servidor en este codelab. Si quieres obtener información para implementar un cliente de notificaciones push, consulta el Codelab: Cómo compilar un cliente de notificaciones push.

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

Compatibilidad del navegador

Se sabe que 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, Safari
• iOS

Pila de aplicaciones

• El servidor se basa 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 necesitas usar ninguna de estas tecnologías para implementar notificaciones push. Elegimos estas tecnologías porque proporcionan una experiencia confiable en codelabs.

Configuración

Obtener una copia editable del código

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

1. Haz clic en Remix para editar para que el proyecto se pueda editar.

Configura la autenticación

Antes de que funcionen las notificaciones push, debes configurar el servidor y el cliente con claves de autenticación. Consulta Firma las solicitudes del protocolo push web para conocer los motivos.

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:[e-mail]. Todos estos valores deben estar entre comillas dobles. Después de realizar las actualizaciones, tu archivo .env debería verse similar al siguiente:

VAPID_PUBLIC_KEY="BKiwTvD9HA…"
VAPID_PRIVATE_KEY="4mXG9jBUaU…"
VAPID_SUBJECT="mailto:[e-mail]"

1. Cierra la terminal de Glitch.

Los valores de las variables de entorno (los elementos de .env) son únicos para un solo proyecto de Glitch. Si remezclas tu proyecto, no se copiarán los valores en .env.

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 las nuevas suscripciones a notificaciones push y borrar las antiguas. 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 contexto sobre el proceso de suscripción.

Guarda información de la suscripción nueva

1. Para obtener una vista previa del sitio, presiona Ver app. Luego, presiona Pantalla completa .

Término clave: Nos referiremos a la pestaña que acabas de abrir como la pestaña App.

1. Haz clic en Registrar service worker 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 Suscríbete a push. Es probable que tu navegador o sistema operativo te pregunten si quieres que el sitio web te envíe notificaciones. Haz clic en Permitir (o en cualquier 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/…

Nota: La URL del extremo cambia según el navegador que uses. Por ejemplo, en Firefox, la URL comienza con https://updates.push.services.mozilla.com/….

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 siguientes datos corresponden a la información de suscripción del cliente que debes guardar.
3. Abre server.js.
4. Actualiza la lógica del controlador de ruta /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);
});

Nota: La base de datos escribe en .data/db.json. Para inspeccionar este archivo en Glitch, haz clic en Tools, luego en Terminal y, luego, ejecuta cat .data/db.json en Terminal. .data/db.json se borra cada vez que editas tu app. Esto se debe a que Glitch ejecuta la secuencia de comandos start en package.json cada vez que editas la app, y esa secuencia incluye una llamada a rm .data/db.json.

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 notificaciones push.
3. Revisa los registros de Glitch nuevamente. Deberías ver /remove-subscription seguido de la información de suscripción del cliente.
4. Actualiza la lógica del controlador de ruta /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 directamente a los clientes. Para ello, se basa en un servicio push. Básicamente, tu servidor inicia el proceso de envío de mensajes a los clientes mediante la realización de solicitudes de servicio web (solicitudes de protocolo web push) a un servicio web (el servicio push) que pertenece al proveedor del navegador que utiliza tu usuario.

1. Actualiza la lógica del controlador de ruta /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 ruta /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 push y, luego, vuelve a hacer clic en Suscribirse a envío. Esto solo es necesario porque, como se mencionó antes, Glitch reinicia el proyecto cada vez que editas el código y el proyecto se configura 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>, en el que <ID> es un número aleatorio.
4. Abre la 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 que se encuentra en el cuerpo de la notificación push debe ser el mismo).

Próximos pasos

• Lee la descripción general de las notificaciones push para obtener una comprensión más profunda de cómo funcionan las notificaciones push.
• Consulta Codelab: Compila un cliente de notificaciones push para aprender a compilar un cliente que solicite permisos de notificaciones, suscriba el dispositivo para recibir notificaciones push y use un service worker para recibir mensajes push y mostrar los mensajes como notificaciones.