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.
- 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.
- Para abrir la terminal de Glitch, haz clic en Tools y, luego, en Terminal.
- En la terminal, ejecuta
npx web-push generate-vapid-keys
. Copia los valores de la clave privada y la clave pública. - Abre
.env
y actualizaVAPID_PUBLIC_KEY
yVAPID_PRIVATE_KEY
. EstableceVAPID_SUBJECT
enmailto:test@test.test
. 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:test@test.test"
- Cierra la terminal de Glitch.
- Abre
public/index.js
. - 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
- Para obtener una vista previa del sitio, presiona Ver app. Luego, presiona Pantalla completa .
- 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/
- 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/…
- Para volver a tu código, haz clic en Ver código fuente en la IU de Glitch.
- 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. - Abre
server.js
. - 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);
});
Borra la información de suscripción anterior
- Regresa a la pestaña de la app.
- Haz clic en Anular la suscripción a notificaciones push.
- Revisa los registros de Glitch nuevamente. Deberías ver
/remove-subscription
seguido de la información de suscripción del cliente. - 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.
- 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);
});
- 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} `);
});
});
}
- 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);
}
});
- Regresa a la pestaña de la app.
- 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.
- Haz clic en Notificarme. Deberías recibir una notificación push. El título debe ser
Hello, Notifications!
y el cuerpo debe serID: <ID>
, en el que<ID>
es un número aleatorio. - 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.