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
- 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é.
- 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 la clave privada y valores de clave pública. - Abre
.env
y actualizaVAPID_PUBLIC_KEY
yVAPID_PRIVATE_KEY
. Definir DeVAPID_SUBJECT
amailto:test@test.test
. 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: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. 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
- 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ía ver un mensaje similar a este:
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 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/…
- 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. 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. - 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 que se sigue
/remove-subscription
por 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 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.
- 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>
, donde<ID>
es una un número aleatorio. - 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.