En este codelab, se muestra paso a paso cómo compilar un cliente de notificaciones push. Al final de este codelab, tendrás un cliente con las siguientes características:
- Suscribir 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 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 del servidor de este codelab ya está completo. Solo podrás para implementar el cliente en este codelab. Para aprender a implementar un servidor de notificaciones push, consulta el Codelab: Crea una notificación push servidor.
Revisa 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, Safari
- iOS
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é.
- 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 valores de clave pública. - En la IU de Glitch, 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.
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 Cómo recibir y mostrar 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úsculas + J` (o `Command + Option + J` en Mac) para abrir Herramientas para desarrolladores.
- Haz clic en la pestaña Consola. Deberías ver el mensaje
Service worker was registered.
accedió a la consola.
Cómo solicitar permisos de notificaciones push
Nunca debes solicitar permiso para enviar notificaciones push cuando se carga la página. En cambio, tu IU debería preguntarle al usuario si desea recibir notificaciones push. Una vez que se confirma explícitamente (por ejemplo, con un clic en un botón), puedes hacer lo siguiente: iniciar el proceso formal para obtener el permiso de notificaciones push del navegador.
- En la IU de Glitch, haz clic en View Source para volver al 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.');
}
- Regresa a la pestaña de la app y haz clic en Suscríbete a push. Tu navegador o sistema operativo, probablemente te pregunte si quieres permitir que el sitio web enviarte notificaciones push. Haz clic en Permitir (o en la frase equivalente). usa tu navegador o SO). En la consola, deberías ver un mensaje que indica si la solicitud se aceptó o rechazó.
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 llama servicio push. Una vez que tengas la información de suscripción a notificaciones push que necesitas para enviarla a un servidor y hacer que el servidor los almacene en una base de datos a largo plazo. Consulta Cómo suscribir al cliente a notificaciones push. para obtener más información 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
. Tal vez algún día sea posible
para enviar mensajes sin mostrar notificaciones visibles para el usuario
(insultos silenciosos), pero los navegadores actualmente no permiten esa función
debido a inquietudes sobre la privacidad.
El valor applicationServerKey
se basa en una función de utilidad que
convierte una cadena base64 en un Uint8Array. Este valor se usa para
autenticación entre tu servidor y el servicio push.
Cómo anular la suscripción a las notificaciones push
Después de que un usuario se suscribe a las notificaciones push, tu IU debe Proporcionar una forma de anular la suscripción en caso de que el usuario cambie de opinión. y ya no desea recibir notificaciones push.
- Reemplaza el comentario
// TODO
enunsubscribeButtonHandler()
con 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 controlar recepción y visualización de los mensajes que se enviaron al cliente de 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, usa 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 aplicación en otros navegadores (o incluso otros dispositivos), pasando por el flujo de trabajo de suscripciones 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. Vuelve a consultar Compatibilidad de navegadores para ver una lista de navegadores/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, probablemente uses la notificación como una forma para volver a atraer a los usuarios y pedirles que visiten tu sitio. Para hacer eso, necesitas configurar un poco más el service worker.
- Reemplaza el comentario
// TODO
en elnotificationclick
del service worker un controlador de eventos con 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 la notificación. El navegador debería abrir una nueva pestaña y cargar
https://web.dev
Próximos pasos
- Consulta
ServiceWorkerRegistration.showNotification()
. para descubrir todas las formas en que puedes personalizar las notificaciones. - Lee la descripción general de las notificaciones push. para comprender mejor cómo funcionan las notificaciones push.
- Consulta Codelab: Compila un servidor de notificaciones push aprender a compilar un servidor que administre suscripciones y envíe el protocolo push web solicitudes.
- Prueba el generador de notificaciones para probar todas las formas de personalizar las notificaciones.