Programado es la palabra clave allí, ¡eso es algo bastante nuevo! Cuando se programa una notificación automática (es decir, “Toma tu píldora” o “Tienes un vuelo en 3 horas”), eso significa que se puede mostrar al usuario incluso si se ha desconectado. Esa es una mejora del pasado donde la notificación automática requería que el usuario estuviera en línea.
Entonces, ¿cómo funcionan las notificaciones automáticas programadas? Hay cuatro partes clave que vamos a ver:
- Registro de un trabajador de servicio
- Agregar y eliminar notificaciones automáticas 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 sucedió algo importante y que es posible que deseen abrir nuestra aplicación (web) nuevamente. Con la API de notificaciones, en combinación con la API de inserción y el protocolo de inserción web HTTP, la web se convirtió en una forma fácil de enviar una notificación de inserción 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 que eso sea menos molesto (tanto Firefox como Chrome tienen planes detallados), Chrome 80 acaba de comenzar una prueba de origen para la nueva API de activación de notificaciones, que nos permite crear notificaciones activadas por diferentes eventos en lugar de un servidor. empuja solo. Por ahora, sin embargo, los disparadores basados en el tiempo son los únicos eventos admitidos que tenemos. Pero otros eventos, como activadores basados en geolocalización, ya están planificados.
Programar un evento en JavaScript es bastante fácil, pero hay un problema. En nuestro escenario de notificaciones automáticas, 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 su lugar, tendremos que hacerlo en un nivel de Service Worker. Ahí es donde entra en juego la nueva API.
La API de activación de notificaciones se encuentra en una fase inicial de comentarios. Necesitas habilitar el #enable-experimental-web-platform-features marca en Chrome o debe 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. Entonces, si lo prueba en su máquina, deberá asegurarse de que se sirva a través de HTTPS.
configurando las cosas
Creé una configuración muy básica. tenemos uno application.js archivo, uno index.html archivo y uno service-worker.js archivo, así como un par de activos de imagen.
/project-folder
├── index.html
├── application.js
├── service-worker.js
└── assets
├─ badge.png
└── icon.pngPuede encontrar el ejemplo completo de una demostración básica de la API de activación de notificaciones en GitHub.
Registro de un trabajador de servicio
Primero, necesitamos registrar un Service Worker. Por ahora, no hará más que registrar que el registro fue exitoso.
// service-worker.js
// listen to the install event
self.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, necesitamos pedir permiso al usuario para mostrar notificaciones. A partir de ahí, obtendremos nuestro registro de Service Worker y registraremos una nueva notificación para este ámbito. Hasta ahora, nada nuevo.
La parte genial es la nueva. showTrigger propiedad. Esto nos permite definir las condiciones para mostrar una notificación. Por ahora, queremos agregar una nueva TimestampTrigger, que acepta una marca de tiempo. Y como todo sucede directamente en el dispositivo, también funciona sin conexión.
// application.js
document.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',
}
);
}
});
};Manejo de la notificación
En este momento, la notificación debería aparecer en la marca de tiempo especificada. Pero ahora necesitamos una forma de interactuar con él, y ahí es donde necesitamos el Service Worker. notificationclick y notificationclose eventos.
Ambos eventos escuchan las interacciones relevantes y ambos pueden usar todo el potencial del Service Worker. Por ejemplo, podríamos abrir una nueva ventana:
// service-worker.js
self.addEventListener('notificationclick', event => {
event.waitUntil(self.clients.openWindow("https://css-tricks.com/"));
});Ese es un ejemplo bastante sencillo. Pero con el poder del Service Worker, podemos hacer mucho más. Verifiquemos si la ventana requerida ya está abierta y solo abramos una nueva si no lo está.
// service-worker.js
self.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("https://css-tricks.com/");
}
}));
});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 quieren descartar la notificación o abrir la aplicación.
// application.js
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',
actions: [
{
action: 'open',
title: 'Open app’
},
{
action: 'close',
title: 'Close notification',
}
]
}
);Ahora usamos esas notificaciones dentro del Service Worker.
// service-worker.js
self.addEventListener('notificationclick', event => {
if (event.action === 'close') {
event.notification.close();
} else {
self.clients.openWindow("https://css-tricks.com/");
}
});Cancelación de notificaciones push
También es posible cancelar las notificaciones pendientes. En este caso, debemos obtener todas las notificaciones pendientes del Service Worker y luego cerrarlas antes de que se envíen al dispositivo.
// application.js
document.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 el Service Worker usando el postMessage método en los clientes de Service Worker. Digamos que queremos notificar a la pestaña que ya está activa que se produjo un clic de notificación push.
// service-worker.js
self.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("https://css-tricks.com/");
}
}));
});// application.js
navigator.serviceWorker.addEventListener('message', event => console.log(event.data));Resumen
La API de notificación 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 jugar con ella y dar su opinión a los desarrolladores.
Si está trabajando con Vue o React, le recomiendo que eche un vistazo a mi propia demostración de la aplicación web progresiva. Incluye un ejemplo documentado que usa la API de activación de notificación para ambos marcos que se ve así:
