Las notificaciones push te permiten brindar una excelente experiencia similar a la de una app a los usuarios, y alertarlos 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 desarrollan más y más casos de uso y requisitos, vemos muchas incorporaciones a las APIs de notificaciones. Chrome 50 (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. Podrás hacer lo siguiente:
- agregar íconos a los botones de notificación
- 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
- Administra la experiencia de notificación repetida cuando una notificación reemplaza la que se muestra actualmente.
Chrome 50 también agregó cargas útiles para notificaciones push. Para mantenerte al día con la API de notificaciones tal como se implementa en Chrome, sigue la especificación y el registrador de problemas de la especificación.
Crea botones de acción atractivos con íconos personalizados
En una entrada reciente sobre los botones de acción de notificaciones en Chrome 49, mencioné que no puedes adjuntar imágenes a los botones de notificación para que se vean elegantes y atractivas, pero puedes usar caracteres Unicode para intercalar emojis, etc. Ahora no tienes que preocuparte: 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'}]
});
El aspecto 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 computadoras de escritorio será a color. (Nota: Hay una discusión sobre el futuro de esto en computadoras). Es posible que algunas plataformas ni siquiera puedan mostrar íconos de acción, así que asegúrate de usarlos para proporcionar contexto a la acción y no como el único indicador del intent.
Por último, como los recursos deben descargarse, es recomendable mantener los íconos lo más pequeños posible y almacenarlos en caché previamente en tu evento de instalación. (En el momento de escribir este artículo, las recuperaciones de recursos de notificaciones en Chrome aún no se enrutan a través del service worker).
Eventos de cierre de notificaciones
Una función de notificaciones que se solicita con frecuencia es la capacidad de saber cuándo el usuario dismissed una notificación. No teníamos forma de hacerlo hasta que un conjunto reciente de cambios en la especificación de notificaciones agregó un evento notificationclose.
Si usas los eventos notificationclick y notificationclose, puedes comprender cómo interactúan los usuarios con tus notificaciones. ¿Las deja abiertas durante mucho tiempo y, luego, las descarta de forma activa, o bien las descarta 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, la misma notificación en su dispositivo móvil también debería descartarse. Aún no tenemos la capacidad de hacerlo de forma silenciosa (recuerda que cada mensaje push debe mostrar una notificación), pero si usas notificationclose, se abre la posibilidad de controlar 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 dentro de tu trabajador de servicio y se activará solo cuando el usuario descarte activamente una notificación, por ejemplo, si descarta una notificación específica o todas las notificaciones de la bandeja (en Android).
Si la marca requireInteraction es falsa o no está establecida, si el usuario no descarta la notificación de forma manual, sino que el sistema lo hace automáticamente, no se activará el evento notificationclose.
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 realizar una lógica personalizada.
self.addEventListener('notificationclose', e => console.log(e.notification));
Puedes probar esto en el Generador de notificaciones. Recibirás una alerta cuando cierres la notificación.
No molestes a los usuarios cuando reemplaces una notificación existente.
Estoy bastante seguro de que Tío Ben se refería al sistema de notificaciones y no a 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, desactivarán todas las notificaciones y es posible que las pierdas por completo.
Cuando creas una notificación, puedes configurarla para que emita una alerta audible o vibre para llamar la atención del usuario. Además, puedes reemplazar una notificación existente reutilizando su atributo "tag" en un objeto de notificación nuevo.
Antes de Chrome 50, cada vez que creabas una notificación o reemplazabas una existente, se ejecutaba un patrón de vibración o se reproducía una alerta audible, lo que podía generar frustración en los usuarios. Ahora, en Chrome 50, tienes control sobre lo que sucede durante la notificación repetida a través de una marca booleana simple llamada "renotify". El nuevo comportamiento predeterminado cuando se usa la misma "etiqueta" para notificaciones posteriores es no mostrar notificaciones. Como desarrollador, debes habilitar la opción para volver a notificar al usuario configurando la marca como "true".
self.registration.showNotification('Oi!', {
'renotify': true,
'tag': 'tag-id-1'
});
Puedes probar esto en el Generador de notificaciones.
Administra la marca de tiempo que se muestra al usuario
En Android, las notificaciones de Chrome muestran sus horas de creación en la esquina superior derecha de forma predeterminada. Lamentablemente, es posible que esta no sea la hora en la que el sistema generó la notificación. Por ejemplo, es posible que el evento se haya activado cuando el dispositivo no tenía conexión, o que la notificación se muestre para una próxima reunión. A partir de Chrome 50, Chrome agregó 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 ve en computadoras, afectará el orden de las notificaciones en dispositivos móviles y computadoras.