Mejoras en las notificaciones web en Chrome 50: íconos, cierres de eventos, renotificar preferencias y marcas de tiempo

Las notificaciones PPush te permiten proporcionar a los usuarios una gran experiencia similar a la de una app, ya que les alertan sobre actualizaciones importantes y oportunas, como los mensajes de chat entrantes. La plataforma de notificaciones es relativamente nueva en los navegadores y, a medida que se amplían más casos de uso y requisitos, vemos muchas incorporaciones a las APIs de notificaciones. Chrome 50 (versión beta en marzo de 2016) no es una excepción, con no menos de cuatro funciones nuevas que les brindan a los desarrolladores más control sobre las notificaciones. Puedes hacer lo siguiente:

  • agregar iconos a los botones de notificaciones,
  • modificar la marca de tiempo para crear una experiencia coherente
  • hacer un seguimiento de los eventos de cierre de notificaciones para ayudar a sincronizar las notificaciones y proporcionar estadísticas,
  • Administrar la experiencia de renotificar cuando una notificación reemplaza la que se muestra en el momento

En Chrome 50 también se agregaron cargas útiles para las notificaciones push. Para mantenerte al tanto de la API de Notifications cuando se implementa en Chrome, sigue las spec y la Herramienta de seguimiento de errores de especificaciones.

Crea botones de acción atractivos con íconos personalizados

En una publicación reciente sobre los botones de acción de las notificaciones en Chrome 49, mencioné que no se pueden adjuntar imágenes a los botones de notificaciones para hacerlos atractivos y llamativos, pero se pueden usar caracteres Unicode para intercalar emojis, etcétera. No te preocupes: con esta incorporación reciente, ahora puedes especificar una imagen en el botón de acción:

self.registration.showNotification('New message from Alice', {
  actions: [
    {action: 'like', title: 'Like', icon: 'https://example/like.png'},
    {action: 'reply', title: 'Reply', icon: 'https://example/reply.png'}]
});
Notificación de escritorio

La apariencia del ícono de acción difiere según la plataforma. Por ejemplo, en Android, el ícono tendrá un filtro gris oscuro aplicado en Lollipop y versiones posteriores, y un filtro blanco antes de Lollipop, mientras que en las computadoras será a todo color. (Nota: Hay conversaciones sobre el futuro de la función en computadoras de escritorio). Es posible que algunas plataformas ni siquiera puedan mostrar íconos de acción, por lo que debes asegurarte de usarlos para proporcionar contexto a la acción y no como el único indicador del intent.

Por último, debido a que los recursos deben descargarse, una práctica recomendada es mantener los íconos lo más pequeños posible y almacenarlos previamente en caché en tu evento de instalación. (Al momento de la redacción de este documento, las recuperaciones de recursos de notificación en Chrome aún no se enrutan a través del service worker).

Eventos de cierre de notificaciones

Una función de las notificaciones muy solicitada es la capacidad de saber cuándo el usuario descarta una notificación. No pudimos hacer eso hasta que un conjunto reciente de cambios en la especificación de la notificación agregó un evento notificationclose.

Si usas el evento notificationclick y el evento notificationclose, puedes comprender cómo interactúan los usuarios con tus notificaciones. ¿Los dejan abiertos durante mucho tiempo y, luego, los descartan de forma activa o actúan sobre ellos de inmediato?

Un caso de uso popular es poder sincronizar notificaciones entre dispositivos. Si el usuario descarta una notificación en su dispositivo de escritorio, también debería descartarse la misma notificación en su dispositivo móvil. Aún no contamos con la capacidad de hacer esto de manera silenciosa (recuerda que todos los mensajes push deben tener una notificación visible), pero si usas notificationclose, puedes resolver esto, ya que te permite hacer un seguimiento del estado de la notificación del usuario en tu servidor y sincronizarlo con los otros dispositivos a medida que el usuario los usa.

Para usar el evento notificationclose, regístralo en el service worker y se activará solo cuando el usuario descarte una notificación de forma activa, por ejemplo, si descarta una notificación específica o descarta todas las notificaciones de su bandeja (en Android).

Si la marca requiredInteraction es falsa o no se establece, si el usuario no descarta la notificación de forma manual, sino que el sistema lo hace automáticamente, no se activa el eventonotificationclose.

A continuación, se muestra una implementación simple. Cuando el usuario descarta la notificación, obtienes acceso al objeto de notificación desde el que puedes ejecutar lógica personalizada.

self.addEventListener('notificationclose', e => console.log(e.notification));

Puedes probar esto en el Generador de notificaciones; recibirás una alerta cuando la cierres.

No molestes a tus usuarios cuando reemplaces una notificación existente

Estoy bastante seguro de que el tío Ben hablaba sobre el sistema de notificaciones y no sobre los poderes de Peter Parker cuando dijo: "Un gran poder conlleva una gran responsabilidad". El sistema de notificaciones es un medio potente para interactuar con los usuarios. Si abusas de su confianza, se desactivarán todas las notificaciones y podrías perderlas por completo.

Cuando creas una notificación, puedes configurarla para que genere una alerta sonora o una vibración para llamar la atención del usuario. Además, puedes reemplazar una notificación existente reutilizando su atributo “etiqueta” en un objeto de notificación nuevo.

Antes de Chrome 50, cada vez que se creaba una notificación o se reemplazaba una existente, se ejecutaba un patrón de vibración o se reproduce una alerta audible, lo que podía frustrar a los usuarios. Ahora, en Chrome 50, ahora tienes control sobre lo que sucede durante una nueva notificación mediante una simple marca booleana llamada "renotify". El nuevo comportamiento predeterminado cuando se usa la misma "etiqueta" para notificaciones posteriores es silenciarlo y, como desarrollador, debes habilitar la opción para "volver a notificar" al usuario estableciendo la marca en "verdadero".

self.registration.showNotification('Oi!', {
  'renotify': true,
  'tag': 'tag-id-1'
});

Puedes probarlo en el Generador de notificaciones.

Administra la marca de tiempo que se muestra al usuario

En Android, las notificaciones de Chrome muestran los horarios de creación en la esquina superior derecha de forma predeterminada. Lamentablemente, es posible que este no sea el momento en que tu sistema generó la notificación. Por ejemplo, es posible que el evento se haya activado cuando el dispositivo estaba sin conexión o que se muestre la notificación para una próxima reunión. A partir de Chrome 50, Chrome agrega una nueva propiedad "timestamp" que permite a los desarrolladores proporcionar la hora que se debe mostrar en la notificación.

self.registration.showNotification('Best day evar!', {
  'timestamp': 360370800000
});

Actualmente, la marca de tiempo solo se puede ver en Chrome para Android. Aunque no se puede ver en computadoras, afectará el orden de las notificaciones tanto en dispositivos móviles como en computadoras.

.