A principios de 2015, presentamos las notificaciones y los mensajes push en Chrome para Android y computadoras. Fue un gran paso adelante en la Web. Los usuarios podían comenzar a interactuar más profundamente con las experiencias en la Web, incluso cuando el navegador estaba cerrado.
Si bien es genial que puedas enviar estos mensajes, lo único que podías hacer con uno era hacer clic en él y abrir una página o descartarlo por completo.
Si observas las notificaciones que se proporcionan de forma nativa a las apps en plataformas para dispositivos móviles, como iOS y Android, cada una permite que el desarrollador defina acciones contextuales con las que el usuario puede invocar e interactuar. En Chrome 48, agregamos una función similar a las notificaciones web en computadoras y Chrome para Android.
La incorporación a la API es bastante simple. Solo debes crear un array de acciones y agregarlas al objeto NotificationOptions cuando llames a showNotification desde un registro de ServiceWorker (ya sea directamente en ServiceWorker o en una página a través de navigator.serviceWorker.ready).
Actualmente, Chrome solo admite dos acciones en cada notificación.
Es posible que algunas plataformas admitan más, menos o ninguna. Para determinar qué admite la plataforma, consulta Notification.maxActions. En los siguientes ejemplos, suponemos que la plataforma admite dos acciones.
self.registration.showNotification('New message from Alice', {
actions: [
{action: 'like', title: 'Like'},
{action: 'reply', title: 'Reply'}]
});
Se creará una notificación simple con dos botones. Ten en cuenta que, por el momento, no es posible agregar íconos a la acción directamente, pero puedes usar emojis y el conjunto de caracteres Unicode extendido para agregar más contexto a los botones de tus notificaciones.
Por ejemplo:
self.registration.showNotification("New message from Alice", {
actions: [
{action: 'like', title: '👍Like'},
{action: 'reply', title: '⤻ Reply'}]
});
Ahora que creaste una notificación y la hiciste 😻, es posible que el usuario interactúe con ella en algún momento en el futuro. Actualmente (a partir de Chrome 48), las interacciones con la notificación se realizan a través del evento notificationclick registrado en tu trabajador de servicio y pueden ser un clic general en la notificación o una presión específica en uno de los botones de acción. A modo de nota, en el futuro también podrás responder alnotificationclose.
Para comprender qué acción realizó el usuario, debes inspeccionar la propiedad action
en el evento y, luego, puedes abrir una página nueva para que el
usuario complete una acción o realizar la tarea en segundo plano.
self.addEventListener('notificationclick', function(event) {
var messageId = event.notification.data;
event.notification.close();
if (event.action === 'like') {
silentlyLikeItem();
}
else if (event.action === 'reply') {
clients.openWindow("/messages?reply=" + messageId);
}
else {
clients.openWindow("/messages?reply=" + messageId);
}
}, false);
Lo interesante es que las acciones no tienen que abrir una ventana nueva, pueden realizar interacciones generales de la aplicación sin crear una interfaz de usuario. Por ejemplo, un usuario podría marcar "Me gusta" o "Borrar" una publicación de redes sociales que realizaría la acción en los datos locales del usuario y, luego, sincronizarla con la nube sin abrir una IU (aunque es recomendable enviar un mensaje sobre el cambio de datos a las ventanas abiertas para que se pueda actualizar la IU). Para una acción que requiera interacción del usuario, abrirías una ventana para que el usuario responda.
Debido a que las plataformas no admitirán la misma cantidad de acciones o, en algunos casos, no podrán admitir botones de acción de notificación, deberás asegurarte de proporcionar siempre un resguardo razonable a una tarea que sea lo que esperarías que el usuario haga si solo hiciera clic en la notificación.
Si quieres ver esto en acción hoy mismo, consulta las pruebas de notificaciones de Peter Beverloo y lee la especificación de notificaciones o sigue la especificación a medida que se actualiza.