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:

• Lleva un registro de las suscripciones a notificaciones push (es decir, el servidor crea una registro de base de datos nuevo cuando un cliente acepta las notificaciones push borra un registro de la base de datos existente cuando un cliente lo 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 con la práctica hablaremos mucho de los conceptos. Finalizar la compra ¿Cómo funcionan las notificaciones push? para aprender sobre los conceptos de las notificaciones push.

El código de cliente de este codelab ya está completo. Solo podrás para implementar el servidor en este codelab. Para aprender a implementar un Cliente de notificaciones push, consulta el Codelab: Crea una notificación push cliente.

Revisa 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 web-push de Node.js se encarga de 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

Se llamará al editor de código que ves a la derecha de estas instrucciones la 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

Para comenzar a recibir notificaciones push, debes configurar al servidor y al cliente con claves de autenticación. Consulta Firma tus solicitudes de protocolo push web. para descubrir por qué.

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 la clave privada y valores de clave pública.
3. Abre .env y actualiza VAPID_PUBLIC_KEY y VAPID_PRIVATE_KEY. Definir De VAPID_SUBJECT a mailto:[e-mail]. Todos estos valores se deben unir entre comillas dobles. Después de realizar las actualizaciones, tu archivo .env debería verse similar a esto:

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. El principal lo que debe hacer tu servidor es guardar nuevas suscripciones a notificaciones push y borrar suscripciones antiguas. Estas suscripciones son lo que te permite 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 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ía ver un mensaje similar a este:

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 preguntará si quieres permitir que el sitio web te envíe notificaciones push. Haz clic en Permitir (o en una frase equivalente que usa el SO o navegador). En el cuadro de estado, deberías ver un mensaje similar a esto:

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. Tú debería ver /add-subscription seguido de algunos datos. /add-subscription es la URL a la que el cliente envía un PUBLICAR cuando quiera suscribirse a notificaciones push. Los datos que sigue es 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 tu app, y esa secuencia de comandos 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 que se sigue /remove-subscription por 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 push directamente a los clientes. Para ello, se basa en un servicio push. Básicamente, tu servidor tan solo inicia el proceso de envío de mensajes a clientes haciendo que la Web solicitudes de servicio (solicitudes web push del protocolo) a un servicio web (el servicio push) que son propiedad del 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>, donde <ID> es una un número aleatorio.
4. Abre tu app en otros navegadores o dispositivos, y prueba suscribirlos a notificaciones push. y, luego, 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 aparece en el cuerpo de la notificación sean iguales).

Próximos pasos

• Lee la descripción general de las notificaciones push. para comprender mejor 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, se suscriba el dispositivo para recibir notificaciones de aplicación y usa un service worker para recibir mensajes push y los muestra como notificaciones.