En este codelab, aprenderás a compilar un cliente de notificaciones push, paso a paso. Al final del codelab, tendrás un cliente que hará lo siguiente:
- Suscribe al usuario a notificaciones push.
- Recibe mensajes push y los muestra como notificaciones.
- Anula la suscripción del usuario a las notificaciones push.
Este codelab se enfoca en ayudarte a aprender mediante la práctica y no habla mucho de conceptos. Consulta ¿Cómo funcionan las notificaciones push? para obtener más información sobre sus conceptos.
El código del servidor de este codelab ya está completo. Solo implementarás el cliente en este codelab. Si quieres aprender a implementar un servidor de notificaciones push, consulta Codelab: Compila un servidor de notificaciones push.
Consulta push-notifications-client-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 y Safari
- iOS
Configuración
Obtén una copia editable del código
El editor de código que ves a la derecha de estas instrucciones se denominará la IU de Glitch a lo largo de este codelab.
- Haz clic en Remix to Edit para que el proyecto sea editable.
Configura la autenticación
Para que las notificaciones push funcionen, debes configurar tu servidor y cliente con claves de autenticación. Consulta Firma las solicitudes de protocolo push web para conocer los motivos.
- En la IU de Glitch, haz clic en Tools y, luego, en Terminal para abrir la terminal de Glitch.
- En la terminal de Glitch, ejecuta
npx web-push generate-vapid-keys
. Copia la clave privada y los valores de la clave pública. - En la IU de Glitch, 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 ser 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.
Registra un service worker
Con el tiempo, tu cliente necesitará un service worker para recibir y mostrar notificaciones. Es mejor registrar el service worker lo antes posible. Consulta Recibe y muestra los mensajes enviados como notificaciones para obtener más contexto.
- Reemplaza el comentario
// TODO add startup logic here
por el siguiente código:
// TODO add startup logic here
if ('serviceWorker' in navigator && 'PushManager' in window) {
navigator.serviceWorker.register('./service-worker.js').then(serviceWorkerRegistration => {
console.info('Service worker was registered.');
console.info({serviceWorkerRegistration});
}).catch(error => {
console.error('An error occurred while registering the service worker.');
console.error(error);
});
subscribeButton.disabled = false;
} else {
console.error('Browser does not support service workers or push messages.');
}
subscribeButton.addEventListener('click', subscribeButtonHandler);
unsubscribeButton.addEventListener('click', unsubscribeButtonHandler);
- Para obtener una vista previa del sitio, presiona Ver app. Luego, presiona Pantalla completa .
- Presiona "Control + Mayús + J" (o bien "Comando + Opción + J" en Mac) para abrir Herramientas para desarrolladores.
- Haz clic en la pestaña Consola. Deberías ver el mensaje
Service worker was registered.
registrado en la consola.
Cómo solicitar un permiso de notificaciones push
Nunca debes solicitar permiso para enviar notificaciones push cuando se cargue la página. En su lugar, tu IU debe preguntarle al usuario si desea recibir notificaciones push. Una vez que el cliente confirme de forma explícita (por ejemplo, con un clic en un botón), puedes iniciar el proceso formal para obtener el permiso de notificación push del navegador.
- En la IU de Glitch, haz clic en View Source para regresar a tu código.
- En
public/index.js
, reemplaza el comentario// TODO
ensubscribeButtonHandler()
por el siguiente código:
// TODO
// Prevent the user from clicking the subscribe button multiple times.
subscribeButton.disabled = true;
const result = await Notification.requestPermission();
if (result === 'denied') {
console.error('The user explicitly denied the permission request.');
return;
}
if (result === 'granted') {
console.info('The user accepted the permission request.');
}
- Vuelve a la pestaña de la app y haz clic en Suscribirse a push. Es probable que tu navegador o sistema operativo te pregunten si quieres permitir que el sitio web te envíe notificaciones push. Haz clic en Permitir (o la frase equivalente que use tu navegador o SO). En Console, deberías ver un mensaje que indique si se aceptó o rechazó la solicitud.
Suscribirse a las notificaciones push
El proceso de suscripción implica la interacción con un servicio web controlado por el proveedor del navegador que se denomina servicio de envío. Una vez que obtienes la información de la suscripción a las notificaciones push, debes enviarla a un servidor y hacer que este la almacene en una base de datos a largo plazo. Consulta Suscribe al cliente a las notificaciones push para obtener más contexto sobre el proceso de suscripción.
- Agrega el siguiente código destacado a
subscribeButtonHandler()
:
subscribeButton.disabled = true;
const result = await Notification.requestPermission();
if (result === 'denied') {
console.error('The user explicitly denied the permission request.');
return;
}
if (result === 'granted') {
console.info('The user accepted the permission request.');
}
const registration = await navigator.serviceWorker.getRegistration();
const subscribed = await registration.pushManager.getSubscription();
if (subscribed) {
console.info('User is already subscribed.');
notifyMeButton.disabled = false;
unsubscribeButton.disabled = false;
return;
}
const subscription = await registration.pushManager.subscribe({
userVisibleOnly: true,
applicationServerKey: urlB64ToUint8Array(VAPID_PUBLIC_KEY)
});
notifyMeButton.disabled = false;
fetch('/add-subscription', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(subscription)
});
La opción userVisibleOnly
debe ser true
. Es posible que algún día se puedan enviar mensajes sin mostrar notificaciones visibles para el usuario (notificaciones silenciosas), pero, por el momento, los navegadores no permiten esa función debido a cuestiones de privacidad.
El valor applicationServerKey
se basa en una función de utilidad que convierte una string base64 en una Uint8Array. Este valor se usa para la autenticación entre tu servidor y el servicio de envío.
Cómo anular la suscripción a notificaciones push
Una vez que un usuario se suscribe a las notificaciones push, la IU debe proporcionar una forma de anular la suscripción en caso de que cambie de opinión y ya no quiera recibirlas.
- Reemplaza el comentario
// TODO
enunsubscribeButtonHandler()
por el siguiente código:
// TODO
const registration = await navigator.serviceWorker.getRegistration();
const subscription = await registration.pushManager.getSubscription();
fetch('/remove-subscription', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({endpoint: subscription.endpoint})
});
const unsubscribed = await subscription.unsubscribe();
if (unsubscribed) {
console.info('Successfully unsubscribed from push notifications.');
unsubscribeButton.disabled = true;
subscribeButton.disabled = false;
notifyMeButton.disabled = true;
}
Recibir un mensaje push y mostrarlo como una notificación
Como se mencionó antes, necesitas un service worker para administrar la recepción y la visualización de los mensajes que se enviaron al cliente desde tu servidor. Consulta Cómo recibir y mostrar los mensajes enviados como notificaciones para obtener más detalles.
- Abre
public/service-worker.js
y reemplaza el comentario// TODO
en el controlador de eventospush
del service worker por el siguiente código:
// TODO
let data = event.data.json();
const image = 'https://cdn.glitch.com/614286c9-b4fc-4303-a6a9-a4cef0601b74%2Flogo.png?v=1605150951230';
const options = {
body: data.options.body,
icon: image
}
self.registration.showNotification(
data.title,
options
);
- Regresa a la pestaña de la app.
- Haz clic en Notificarme. Deberías recibir una notificación push.
- Intenta abrir la URL de la pestaña de tu app en otros navegadores (o incluso otros dispositivos), completa el flujo de trabajo de la suscripción y, luego, haz clic en Notificar a todos. Deberías recibir la misma notificación push en todos los navegadores a los que te suscribiste. Consulta Compatibilidad con navegadores para ver una lista de combinaciones de navegador/SO que funcionan o no.
Puedes personalizar la notificación de muchas maneras. Consulta los parámetros de ServiceWorkerRegistration.showNotification()
para obtener más información.
Cómo abrir una URL cuando un usuario hace clic en una notificación
En el mundo real, es probable que uses las notificaciones para reactivar la participación de los usuarios y pedirles que visiten tu sitio. Para hacer eso, debes configurar un poco más tu service worker.
- Reemplaza el comentario
// TODO
en el controlador de eventosnotificationclick
del service worker por el siguiente código:
// TODO
event.notification.close();
event.waitUntil(self.clients.openWindow('https://web.dev'));
- Regresa a la pestaña de la app, envíate otra notificación y, luego,
haz clic en ella. El navegador debe abrir una pestaña nueva y cargar
https://web.dev
.
Próximos pasos
- Consulta
ServiceWorkerRegistration.showNotification()
para descubrir todas las diferentes formas en que puedes personalizar las notificaciones. - Lee la Descripción general de las notificaciones push para obtener una comprensión conceptual más detallada de cómo funcionan estas notificaciones.
- Consulta Codelab: Compila un servidor de notificaciones push para aprender a compilar un servidor que administre las suscripciones y envíe solicitudes de protocolo push web.
- Prueba el Generador de notificaciones para probar todas las formas en que puedes personalizar las notificaciones.