Crear notificaciones push programadas

Programado es la palabra clave allí: ¡eso es algo bastante nuevo! Cuando se programa una notificación automática (es decir, “Tómate tu pastilla” o “Tienes un vuelo en 3 horas”), eso significa que se puede mostrar al usuario incluso si se ha desconectado. Esta es una mejora con respecto al pasado, donde las notificaciones automáticas requerían que el usuario estuviera en línea.

Entonces, ¿cómo funcionan las notificaciones automáticas programadas? Hay cuatro partes claves que veremos:

• Registrador de un trabajador de servicio
• Agregar y eliminar notificaciones push programadas
• Mejora de las notificaciones push con botones de acción
• Manejo de notificaciones push en Service Worker

Primero, un poco de historia.

Las notificaciones automáticas son una excelente manera de informar a los usuarios del sitio que algo importante ha sucedido y que tal vez quieran abrir nuestra aplicación (web) nuevamente. Con la API de notificaciones, en combinación con la API Push y el protocolo HTTP Web Push, la web se convierte en una forma sencilla de enviar una notificación push desde un servidor a una aplicación y mostrarla en un dispositivo.

Es posible que ya hayas visto evolucionar este tipo de cosas. Por ejemplo, ¿con qué frecuencia ves algún tipo de alerta para aceptar notificaciones de un sitio web? Si bien los proveedores de navegadores ya están trabajando en soluciones para hacerlo menos molesto (tanto Firefox como Chrome han delineado planos), Chrome 80 acaba de comenzar una prueba de origen para la nueva API Notification Trigger, que nos permite crear notificaciones activadas para diferentes eventos. en lugar de un servidor. empujar solo. Por ahora, sin embargo, los activadores basados ​​en el tiempo son los únicos eventos admitidos que tenemos. Pero ya están previstos otros eventos, como activadores basados ​​en la geolocalización.

Programar un evento en JavaScript es bastante fácil, pero hay un problema. En nuestro escenario de notificaciones push, no podemos estar seguros de que la aplicación se esté ejecutando en el momento exacto en que queremos mostrar la notificación. Esto significa que no podemos simplemente programarlo en una capa de aplicación. En cambio, necesitaremos hacerlo a nivel de trabajador de servicio. Ahí es donde entra en juego la nueva API.

La API de activación de notificaciones se encuentra en una fase inicial de comentarios. Debe habilitar la #enable-experimental-web-platform-featuresbandera en Chrome o registrar su aplicación para una prueba de origen.

Además, la API de Service Worker requiere una conexión segura a través de HTTPS. Por lo tanto, si lo prueba en su máquina, deberá asegurarse de que se proporcione a través de HTTPS.

Configurando las cosas

Cree una configuración muy básica. Tenemos un application.jsarchivo, un index.htmlarchivo y un service-worker.jsarchivo, así como un par de recursos de imagen.

/project-folder├── index.html├── application.js├── service-worker.js└── assets   ├─ badge.png   └── icon.png

Puede encontrar el ejemplo completo de una demostración básica de API de activación de notificaciones en GitHub.

Registrador de un trabajador de servicio

Primero, necesitamos registrar un trabajador de servicio. Por ahora, no hará más que registrar que el registro se realizó correctamente.

// service-worker.js// listen to the install eventself.addEventListener('install', event = console.log('ServiceWorker installed'));

!-- index.html --script  if ('serviceWorker' in navigator) {    navigator.serviceWorker.register('/service-worker.js');  }/script

Configurar la notificación push

Dentro de nuestra aplicación, debemos pedir permiso al usuario para mostrar notificaciones. A partir de ahí, obtendremos nuestro registro de trabajador de servicio y registraremos una nueva notificación para este alcance. Hasta ahora, nada nuevo.

Lo bueno es la nueva showTriggerpropiedad. Esto nos permite definir las condiciones para mostrar una notificación. Por ahora, queremos agregar un nuevo archivo TimestampTriggerque acepte una marca de tiempo. Y como todo sucede directamente en el dispositivo, también funciona sin conexión.

// application.jsdocument.querySelector('#notification-button').onclick = async () = {  const reg = await navigator.serviceWorker.getRegistration();  Notification.requestPermission().then(permission = {    if (permission !== 'granted') {      alert('you need to allow push notifications');    } else {      const timestamp = new Date().getTime() + 5 * 1000; // now plus 5000ms      reg.showNotification(        'Demo Push Notification',        {          tag: timestamp, // a unique ID          body: 'Hello World', // content of the push notification          showTrigger: new TimestampTrigger(timestamp), // set the time for the push notification          data: {            url: window.location.href, // pass the current url to the notification          },          badge: './assets/badge.png',          icon: './assets/icon.png',        }      );    }  });};

Manejando la notificación

En este momento, la notificación debería aparecer en la marca del tiempo especificado. Pero ahora necesitamos una forma de interactuar con él, y ahí es donde necesitamos el trabajador de servicio notificationclicky notificationcloselos eventos.

Ambos eventos escuchan las interacciones relevantes y ambos pueden utilizar todo el potencial del Service Worker. Por ejemplo, podríamos abrir una nueva ventana:

// service-worker.jsself.addEventListener('notificationclick', event = {  event.waitUntil(self.clients.openWindow('/'));});

Ese es un ejemplo bastante sencillo. Pero con el poder del Service Worker, podemos hacer mucho más. Comprobemos si la ventana requerida ya está abierta y solo abramos una nueva si no lo está.

// service-worker.jsself.addEventListener('notificationclick', event = {  event.waitUntil(self.clients.matchAll().then(clients = {    if (clients.length){ // check if at least one tab is already open      clients[0].focus();    } else {      self.clients.openWindow('/');    }  }));});

Acciones de notificación

Otra excelente manera de facilitar la interacción con los usuarios es agregar acciones predefinidas a las notificaciones. Podríamos, por ejemplo, dejarles elegir si queremos descartar la notificación o abrir la aplicación.

// application.jsreg.showNotification(  'Demo Push Notification',  {    tag: timestamp, // a unique ID    body: 'Hello World', // content of the push notification    showTrigger: new TimestampTrigger(timestamp), // set the time for the push notification    data: {      url: window.location.href, // pass the current url to the notification    },    badge: './assets/badge.png',    icon: './assets/icon.png',    actions: [      {        action: 'open',        title: 'Open app’      },      {        action: 'close',        title: 'Close notification',      }    ]  });

Ahora usamos esas notificaciones dentro del Service Worker.

// service-worker.jsself.addEventListener('notificationclick', event = {  if (event.action === 'close') {    event.notification.close();  } else {    self.clients.openWindow('/');  }});

Cancelar notificaciones push

También es posible cancelar notificaciones pendientes. En este caso, debemos recibir todas las notificaciones pendientes del Service Worker y luego cerrarlas antes de que se envíen al dispositivo.

// application.jsdocument.querySelector('#notification-cancel').onclick = async () = {  const reg = await navigator.serviceWorker.getRegistration();  const notifications = await reg.getNotifications({    includeTriggered: true  });  notifications.forEach(notification = notification.close());  alert(`${notifications.length} notification(s) cancelled`);};

Comunicación

El último paso es configurar la comunicación entre la aplicación y Service Worker utilizando el postMessagemétodo de los clientes de Service Worker. Digamos que queremos notificar a la pestaña que ya está activada que se produjo un clic en una notificación push.

// service-worker.jsself.addEventListener('notificationclick', event = {  event.waitUntil(self.clients.matchAll().then(clients = {    if(clients.length){ // check if at least one tab is already open      clients[0].focus();      clients[0].postMessage('Push notification clicked!');    } else {      self.clients.openWindow('/');    }  }));});

// application.jsnavigator.serviceWorker.addEventListener('message', event = console.log(event.data));

resumen

La API de notificaciones es una característica muy poderosa para mejorar la experiencia móvil de las aplicaciones web. Gracias a la llegada de la API Notification Trigger, acaba de obtener una mejora muy importante. La API aún está en desarrollo, por lo que ahora es el momento perfecto para experimentar con ella y brindar comentarios a los desarrolladores.

Si estás trabajando con Vue o React, te recomiendo que eche un vistazo a mi propia demostración de aplicación web progresiva. Incluye un ejemplo documentado que utiliza la API de activación de notificaciones para ambos marcos y que se ve así: