API de Notification Triggers

Los activadores de notificaciones te permiten programar notificaciones locales que no requieren una conexión de red, lo que las hace ideales para casos de uso como las apps de calendario.

¿Qué son los activadores de notificaciones?

Los desarrolladores web pueden mostrar notificaciones con la API de notificaciones web. Esta función se usa a menudo con la API de Push para informar al usuario sobre información urgente, como eventos de noticias de última hora o mensajes recibidos. Para mostrar las notificaciones, se ejecuta JavaScript en el dispositivo del usuario.

El problema con la API de Push es que no es confiable para activar notificaciones que deben mostrarse cuando se cumple una condición en particular, como la hora o la ubicación. Un ejemplo de una condición basada en el tiempo es una notificación de calendario que te recuerda una reunión importante con tu jefe a las 2 p.m. Un ejemplo de una condición basada en la ubicación es una notificación que te recuerda que debes comprar leche cuando entras a las inmediaciones de tu tienda de comestibles. La conectividad de red o las funciones que preservan la batería, como el modo Descanso, pueden retrasar la entrega de notificaciones push.

Los activadores de notificaciones resuelven este problema, ya que te permiten programar notificaciones con su condición de activación con anticipación, de modo que el sistema operativo envíe la notificación en el momento adecuado, incluso si no hay conectividad de red o si el dispositivo está en modo de ahorro de batería.

Casos de uso

Las aplicaciones de calendario pueden usar activadores de notificaciones basados en el tiempo para recordarle al usuario las próximas reuniones. El esquema de notificaciones predeterminado para una app de calendario podría consistir en mostrar una primera notificación de atención una hora antes de una reunión y, luego, otra notificación más urgente cinco minutos antes.

Una cadena de TV podría recordarles a los usuarios que está por comenzar su programa de TV favorito o que está por comenzar la transmisión en vivo de una conferencia.

Los sitios de conversión de zonas horarias pueden usar activadores de notificaciones basados en el tiempo para permitir que sus usuarios programen alarmas para conferencias telefónicas o videollamadas.

Estado actual

Paso Estado
1. Crear explicación Completar
2. Crea un borrador inicial de la especificación Sin iniciar
3. Recopila comentarios y itera en el diseño. En curso
4. Prueba de origen Completado
5. Lanzamiento Sin iniciar

Cómo usar activadores de notificaciones

Habilitación a través de about://flags

Para experimentar con la API de Notification Triggers de forma local, sin un token de prueba de origen, habilita la marca #enable-experimental-web-platform-features en about://flags.

Detección de atributos

Para saber si el navegador admite activadores de notificaciones, verifica si existe la propiedad showTrigger:

if ('showTrigger' in Notification.prototype) {
  /* Notification Triggers supported */
}

Programa una notificación

Programar una notificación es similar a mostrar una notificación push normal, excepto que debes pasar una propiedad de condición showTrigger con un objeto TimestampTrigger como valor al objeto options de la notificación.

const createScheduledNotification = async (tag, title, timestamp) => {
  const registration = await navigator.serviceWorker.getRegistration();
  registration.showNotification(title, {
    tag: tag,
    body: 'This notification was scheduled 30 seconds ago',
    showTrigger: new TimestampTrigger(timestamp + 30 * 1000),
  });
};

Cómo cancelar una notificación programada

Para cancelar notificaciones programadas, primero solicita una lista de todas las notificaciones que coincidan con una etiqueta determinada a través de ServiceWorkerRegistration.getNotifications(). Ten en cuenta que debes pasar la marca includeTriggered para que las notificaciones programadas se incluyan en la lista:

const cancelScheduledNotification = async (tag) => {
  const registration = await navigator.serviceWorker.getRegistration();
  const notifications = await registration.getNotifications({
    tag: tag,
    includeTriggered: true,
  });
  notifications.forEach((notification) => notification.close());
};

Depuración

Puedes usar el panel de notificaciones de Chrome DevTools para depurar notificaciones. Para iniciar la depuración, presiona Iniciar grabación de eventosCómo comenzar a grabar eventos o Control+E (Comando+E en Mac). Chrome DevTools registra todos los eventos de notificación, incluidas las notificaciones programadas, mostradas y cerradas, durante tres días, incluso cuando DevTools está cerrado.

Se registró un evento de notificación programada en el panel Notificaciones de Herramientas para desarrolladores de Chrome, que se encuentra en el panel Aplicación.
Una notificación programada.
Se registró un evento de notificación que se mostró en el panel Notificaciones de Chrome DevTools.
Una notificación que se muestra.

Demostración

Puedes ver los activadores de notificaciones en acción en la demo, que te permite programar notificaciones, crear una lista de notificaciones programadas y cancelarlas. El código fuente está disponible en Glitch.

Captura de pantalla de la app web de demostración de activadores de notificaciones.
La demo de activadores de notificaciones.

Seguridad y permisos

El equipo de Chrome diseñó e implementó la API de Notification Triggers según los principios básicos definidos en Controlar el acceso a funciones potentes de la plataforma web, incluidos el control del usuario, la transparencia y la ergonomía. Debido a que esta API requiere trabajadores del servicio, también requiere un contexto seguro. El uso de la API requiere el mismo permiso que las notificaciones push normales.

Control de usuarios

Esta API solo está disponible en el contexto de un ServiceWorkerRegistration. Esto implica que todos los datos requeridos se almacenan en el mismo contexto y se borran automáticamente cuando se borra el trabajador de servicio o cuando el usuario borra todos los datos del sitio del origen. El bloqueo de cookies también evita que se instalen trabajadores de servicio en Chrome y, por lo tanto, que se use esta API. El usuario siempre puede inhabilitar las notificaciones del sitio en la configuración del sitio.

Transparencia

A diferencia de la API de Push, esta API no depende de la red, lo que implica que las notificaciones programadas necesitan todos los datos requeridos con anterioridad, incluidos los recursos de imagen a los que hacen referencia los atributos badge, icon y image. Esto significa que el desarrollador no puede ver una notificación programada y no implica activar el service worker hasta que el usuario interactúa con la notificación. En consecuencia, actualmente no existe una forma conocida en que el desarrollador pueda obtener información sobre el usuario a través de enfoques que posiblemente invadan la privacidad, como la búsqueda de ubicación geográfica de direcciones IP. Este diseño también permite que la función aproveche de manera opcional los mecanismos de programación que proporciona el sistema operativo, como AlarmManager de Android, lo que ayuda a preservar la batería.

Comentarios

El equipo de Chrome quiere conocer tus experiencias con los activadores de notificaciones.

Cuéntanos sobre el diseño de la API

¿Existe algún aspecto de la API que no funcione como esperabas? ¿O faltan métodos o propiedades que necesitas para implementar tu idea? ¿Tienes alguna pregunta o comentario sobre el modelo de seguridad? Informa un problema de especificación en el repositorio de GitHub de Notification Triggers o agrega tus comentarios a un problema existente.

¿Tienes problemas con la implementación?

¿Encontraste un error en la implementación de Chrome? ¿O la implementación es diferente de la especificación? Envía un informe de errores a new.crbug.com. Asegúrate de incluir tantos detalles como sea posible, instrucciones simples para reproducirlo y establece Componentes en UI>Notifications. Glitch funciona muy bien para compartir reproducciones de errores rápidas y fáciles.

¿Tienes pensado usar la API?

¿Planeas usar activadores de notificaciones en tu sitio? Tu apoyo público nos ayuda a priorizar las funciones y les muestra a otros proveedores de navegadores lo importante que es admitirlas. Envía un tweet a @ChromiumDev con el hashtag #NotificationTriggers y cuéntanos dónde y cómo lo usas.

Vínculos útiles

Agradecimientos

Richard Knoll implementó los activadores de notificaciones, y Peter Beverloo escribió la explicación, con contribuciones de Richard. Las siguientes personas revisaron el artículo: Joe Medley, Pete LePage, así como Richard y Peter. Imagen hero de Lukas Blazek en Unsplash.