Las notificaciones push son algo común en la web moderna. Le permiten comunicar información oportuna al usuario, incluso si su sitio no está realmente abierto. El navegador del usuario maneja los eventos push entrantes y muestra notificaciones usando las superficies de la interfaz de usuario del sistema, como el Centro de actividades de Windows y la pantalla de bloqueo de Android.
La implementación de Web Push en su sitio o PWA requiere la combinación de dos API de navegador distintas. El código responsable de suscribirse y recibir notificaciones utiliza el componente Push API de los trabajadores del servicio. Este código se ejecuta continuamente en segundo plano y el navegador lo invocará cuando sea necesario gestionar una nueva notificación.
Cuando se recibe un evento, el trabajador del servicio debe usar la API de notificación para ver la notificación. Esto crea una alerta visual a través de interfaces a nivel de sistema operativo.
Aquí hay una guía completa para hacer que Web Push funcione en su sitio. Digamos que ya tiene un componente del lado del servidor que puede registrar suscripciones push y enviar sus alertas.
El trabajador de servicio
CONTENIDOS DE LA PAGINA
Comencemos con el trabajador del servicio. Los trabajadores del servicio tienen múltiples roles: pueden almacenar en caché los datos para su uso sin conexión, realizar sincronizaciones periódicas en segundo plano y actuar como controladores de notificaciones. Los trabajadores del servicio utilizan una arquitectura basada en eventos. Una vez registrado desde un sitio, el navegador del usuario llamará al operador del servicio en segundo plano cuando se generen los eventos a los que se suscribe.
Se requiere un evento principal para Web Push: push. Esto recibe un PushEvent objeto que le permite acceder a la carga útil enviada por el servidor.
self.addEventListener("push", e => { const payload = JSON.parse(e.data.text()); e.waitUntil(self.registration.showNotification( payload.title, { body: payload.body, icon: "/icon.png" } )); });
El código anterior configura un trabajador de servicio capaz de reaccionar a eventos push entrantes. Espera que el servidor envíe cargas útiles JSON como esta:
{
"title": "Title text for the notification",
"body": "This is the longer text of the notification."
}
Cuando se recibe un evento de inserción, el trabajador de soporte muestra una notificación del navegador llamando al showNotification() característica disponible en su self.registration propiedad. La función está encerrada en un waitUntil() llamar para que el navegador espere a que aparezca la notificación antes de despedir al trabajador del servicio.
El showNotification() La función toma dos argumentos: el texto del título de la notificación y un objeto de opciones. En este ejemplo, se pasan dos opciones, un texto más largo y un icono para que se muestre en la notificación. Hay muchas otras opciones que le permiten configurar patrones de vibración, insignias personalizadas y requisitos de interacción. No todos los navegadores y sistemas operativos admiten todas las funciones expuestas por la API.
Complete el lado del trabajador del servicio del código volviéndolo a registrar en su JavaScript principal:
if (navigator.serviceWorker) { // replace with the path to your service worker file navigator.serviceWorker.register("/sw.js").catch(() => { console.error("Couldn't register the service worker.") }); }
Este código debe ejecutarse en cada carga de página. Se asegura de que el navegador admita los trabajadores del servicio y luego registra el archivo del trabajador. Los navegadores actualizarán automáticamente el trabajador del servicio siempre que la copia del servidor tenga diferencias de bytes con respecto a la versión instalada actualmente.
Registro para suscripciones push
Ahora debe suscribirse al navegador para recibir notificaciones automáticas. El siguiente código pertenece al archivo JavaScript principal, fuera del trabajador del servicio.
async function subscribeToPush() { if (navigator.serviceWorker) { const reg = await navigator.serviceWorker.getRegistration(); if (reg && reg.pushManager) { const subscription = await reg.pushManager.getSubscription(); if (!subscription) { const key = await fetch("https://example.com/vapid_key"); const keyData = await key.text(); const sub = await reg.pushManager.subscribe({ applicationServerKey: keyData, userVisibleOnly: true }); await fetch("https://example.com/push_subscribe", { method: "POST", headers: {"Content-Type": "application/json"}, body: JSON.stringify({ endpoint: sub.endpoint, expirationTime: sub.expirationTime, keys: sub.toJSON().keys }) }); } } } }
Luego llame a su función para suscribir el navegador a notificaciones push:
Examinemos qué está haciendo el código de suscripción. Las primeras líneas comprueban la presencia de un agente de servicio, recuperan su registro y detectan soporte para notificaciones push. pushManager no se configurará en navegadores que no admitan Web Push.
vocación pushManager.getSubscription() devuelve una promesa que da como resultado un objeto que describe la suscripción push del navegador actual para su sitio. Si esto ya está configurado, no es necesario volver a inscribir al usuario.
El flujo de suscripción real comienza con la solicitud para recuperar las claves VAPID del servidor. La especificación VAPID es un mecanismo que permite al navegador verificar que los eventos push realmente provienen de su servidor. Debe exponer un punto final de API de servidor que proporcione una clave VAPID. Esto se le da a la pushManager.subscribe() función para que el navegador conozca la clave en la que confiar. Los separados userVisibleOnly la opción indica que solo se mostrarán las notificaciones que se muestran visiblemente en la pantalla.
El pushManager.subscribe() la llamada devuelve un PushSubscription tema que describe su nueva suscripción. Estos datos se envían al servidor en otra solicitud de búsqueda. En una aplicación real, también enviará la ID del usuario activo para que pueda vincular la suscripción push a su dispositivo.
Su código del lado del servidor para enviar una notificación de inserción a un usuario debería tener este aspecto:
- Consulte en su almacén de datos todas las suscripciones push vinculadas al usuario objetivo.
- Envíe su carga útil de notificación al punto final indicado por cada suscripción, asegurándose de incluir las claves de autenticación de la suscripción (
keysen los datos enviados por el navegador en el momento de la suscripción). Firme el evento con la misma clave VAPID que envió al navegador.
Cada suscripción endpoint hará referencia a la plataforma de envío de notificaciones del proveedor del navegador. Esta URL ya incluye un identificador único para la suscripción. Cuando envía una carga útil al punto final, el proceso en segundo plano del navegador recibirá los datos y llamará a su trabajador de servicio. Para Chrome en Android, el proceso del navegador está directamente integrado con el demonio de notificación del sistema.
¿Cuándo registrar al usuario?
Al configurar los flujos de suscripción, recuerde que el usuario deberá aceptar una solicitud de autorización del navegador antes de que se complete el registro. Muchos navegadores ocultan o rechazan automáticamente las solicitudes de permiso no solicitadas; sin embargo, es posible que pedirle a un usuario que se registre cuando llegue a su sitio no proporcione el resultado deseado.
Obtenga las mejores oportunidades de registro con éxito asociando las solicitudes de suscripción con la acción directa del usuario. Considere proporcionar un banner en la aplicación que explique los beneficios de habilitar notificaciones y ofrezca un botón «Habilitar ahora». Puede comprobar si el usuario ya está suscrito y ocultar el banner con el pushManager.getSubscription() función mostrada arriba.
Al hacer clic en el botón de habilitación se debe invocar la función de suscripción. El proceso puede tardar unos segundos mientras el navegador configura el registro y se completan las llamadas de red. Mostrar una ruleta de carga durante este tiempo ayudará a mantener informado al usuario.
Los usuarios también deben tener una forma de darse de baja. Si bien pueden revocar el permiso de su navegador en cualquier momento, algunos usuarios buscarán una opción en la aplicación, especialmente si han instalado su sitio como PWA.
Aquí hay una implementación simple para darse de baja:
async function unsubscribePush() { const reg = await navigator.serviceWorker.getRegistration(); const subscription = await reg.pushManager.getSubscription(); if (subscription) { await subscription.unsubscribe(); await fetch(`https://example.com/push_unsubscribe/${subscription.endpoint}`, {method: "DELETE"}); } else { // already subscribed } }
vocación unsubscribe() en un PushSubscription cancelar la suscripción, devolviendo el navegador a su estado predeterminado. Su agente de soporte dejará de recibir push eventos. El punto final de la suscripción se envía a su servidor para que pueda eliminarlo de su almacén de datos y evitar enviar datos a lo que ahora es una URL muerta.
Gestión de plazos y renovaciones
Puede que hayas notado la expirationTime propiedad en el PushSubscription objeto creado por el navegador. Esto no siempre se establecerá; cuando sea así, el dispositivo dejará de recibir notificaciones después de este tiempo.
Prácticamente, expirationTime actualmente no se utiliza en los principales navegadores. Los tokens producidos por Chrome no caducan hasta que se cancelan manualmente, luego expirationTime es siempre null. Firefox no se configura expirationTime ambos, pero su servicio de notificación puede reemplazar las suscripciones durante su vida útil.
Puede responder al navegador cambiando su suscripción push activa implementando el pushsubscriptionchange evento en su agente de servicio. Desafortunadamente, hay dos versiones de este evento: la implementación original, actualmente utilizada por Firefox, y la nueva v2, que aún no es compatible con ningún navegador.
La especificación original tiene serios problemas de usabilidad que dificultan la respuesta al evento. Cuando recibe un evento v1, el navegador ha eliminado la suscripción original y debe crear una nueva manualmente. El problema es que sin acceso a la suscripción caducada no puede enviar una solicitud de «reemplazo» a su servidor; no tiene forma de acceder a la anterior. endpoint URL.
La especificación v2 aborda este problema proporcionando un evento con oldSubscription Y newSubscription propiedad. Cuando recibe el evento, la suscripción anterior ha sido cancelada pero aún puede acceder a sus propiedades. La nueva suscripción ahora la crea el navegador.
Aquí hay un ejemplo de implementación. pushsubscriptionchange con la nueva especificación:
self.addEventListener("pushsubscriptionchange", e => { e.waitUntil(async () => { await fetch("https://example.com/push_change", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ auth: (e.newSubscription.toJSON().keys?.auth || null), endpoint: e.newSubscription.endpoint, endpointOld: e.oldSubscription.endpoint, expirationTime: e.newSubscription.expirationTime, p256dh: (e.newSubscription.toJSON().keys?.p256dh || null) }) }); }); });
Los puntos finales son únicos, por lo que su servidor puede buscar la suscripción anterior y actualizar sus propiedades con las de la nueva suscripción. Si también desea agregar soporte para la especificación anterior, deberá monitorear manualmente el punto final de suscripción activo fuera de la API de inserción. Almacenar en localStorage o IndexedDB le permitirá acceder a él desde su propio pushsubscriptionchange administrador para que pueda solicitar al servidor que reemplace la suscripción.
La especificación revisada es mucho más fácil de implementar que su contraparte anterior. Si bien aún no es compatible con los navegadores, vale la pena agregarlo a su representante de soporte. Unas pocas líneas de código harán que su administración de push esté preparada para el futuro frente a las nuevas versiones del navegador.
Agregar botones de acción
Las notificaciones push pueden incluir botones interactivos que permiten al usuario tomar medidas inmediatas. Aquí hay un showNotification() llamada que crea uno:
self.registration.showNotification( "Notification with actions", { body: "This notification has a button.", actions: [ { action: "/home", title: "Go to Homescreen", icon: "/home.png" } ] } );
Cada notificación puede incluir varias acciones, cada una con una etiqueta, un icono y action. Esta última propiedad debe identificar una acción que la aplicación puede iniciar en respuesta a la presión del usuario.
Cuando el usuario toca una acción, su representante de soporte recibe una notificationclick evento:
self.addEventListener("notificationclick", e => { const uri = e.action; const notification = e.notification; notification.close(); clients.openWindow(`${self.location.origin}${action}`); });
Estamos usando el action propiedad para declarar un URI al que el usuario puede navegar. Se abre una nueva pestaña en el URI cuando se presiona la notificación. vocación notification.close() asegura que la notificación también sea rechazada. De lo contrario, algunas plataformas obligarán al usuario a eliminarlo manualmente.
Resumen
Implementar Web Push puede parecer abrumador si nunca antes ha trabajado con API relevantes. Más que preocupaciones técnicas, debe mantener la experiencia del usuario a la vanguardia de su mente y asegurarse de comunicarse porque vale la pena habilitar las notificaciones.
La suscripción y cancelación de suscripción push se produce en el código JavaScript principal de la aplicación, utilizando navigator.serviceWorker API. El código que responde a nuevos eventos push y muestra notificaciones del navegador reside en el propio trabajador del servicio.
Web Push ahora es compatible con la mayoría de los principales navegadores web, siendo Safari la principal excepción. Recuerde que las notificaciones aparecerán de manera diferente en cada navegador y familia de sistemas operativos, así que no asuma que una característica particular del showNotification() La API estará disponible universalmente.
