Acciones de notificaciones en Chrome 48

A principios de 2015, presentamos los mensajes y las notificaciones push en Chrome para Android y computadoras de escritorio. Fue un gran avance en la Web. Los usuarios podían comenzar a interactuar de manera más profunda con las experiencias de la Web incluso cuando el navegador estaba cerrado.

Aunque es genial que puedas enviar estos mensajes, lo único que puedes hacer con ellos es hacer clic en ellos y abrir una página, o descartarla por completo.

Si observas las notificaciones que se proporcionan de forma nativa a las apps en plataformas móviles, como iOS y Android, ambas le permiten al desarrollador definir acciones contextuales que el usuario puede invocar y con las que puede interactuar. En Chrome 48, ahora agregamos una función similar a las notificaciones web en computadoras de escritorio y Chrome para Android.

Captura de pantalla de la notificación

El agregado 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 el 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 compatibilidad y otras podrían admitir menos o ninguna en absoluto. 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'}]
});

Esto creará una notificación simple con dos botones. Ten en cuenta que no es posible agregar íconos a la acción directamente (todavía), pero puedes usar emojis y el grupo de caracteres Unicode extendido para agregar más contexto a los botones de 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 viste 😻, el usuario podría interactuar con ella más adelante. Todas las interacciones con la notificación actualmente (a partir de Chrome 48) se generan a través del evento notificationclick registrado en el service worker, que puede ser un clic general en la notificación o una presión específica de uno de los botones de acción. Nota: En el futuro, también podrás responder al eventonotificationclose.

Para comprender qué acción realizó el usuario, debes inspeccionar la propiedad action en el evento y, luego, tienes la opción de abrir una página nueva para que el usuario complete una acción o la realice 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 no es necesario que las acciones abran una ventana nueva, sino que pueden realizar interacciones generales con la aplicación sin crear una interfaz de usuario. Por ejemplo, un usuario podría marcar con "Me gusta" o "Borrar" una publicación de redes sociales que realizará la acción con los datos locales del usuario y, luego, sincronizará los datos con la nube sin abrir una IU (aunque es una buena práctica enviar un mensaje sobre el cambio de datos a cualquier ventana abierta para que se pueda actualizar la IU). En el caso de una acción que requiere la interacción del usuario, abre una ventana para que este la responda.

Debido a que las plataformas no admitirán la misma cantidad de acciones o, en algunos casos, no podrán admitir los botones de acción de notificación, deberás asegurarte de proporcionar siempre un resguardo razonable para una tarea que es lo que esperarías que el usuario hiciera si simplemente hiciera clic en la notificación.

Si deseas ver esto en acción hoy, consulta el artículo Peter Beverloo's Notification Harnes y lee la especificación de las notificaciones o sigue la especificación a medida que se actualiza.