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 en las cercanías 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 de una app de calendario podría ser mostrar una primera notificación anticipada 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á a punto de 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. Crea una 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 */
}
Cómo programar 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 Notificaciones de Chrome DevTools para depurar notificaciones. Para iniciar la depuración, presiona Iniciar grabación de 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.
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.
Seguridad y permisos
El equipo de Chrome diseñó e implementó la API de Notification Triggers con los principios básicos definidos en Controlling Access to Powerful Web Platform Features, 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 de antemano, incluidos los recursos de imagen a los que hacen referencia los atributos badge, icon y image. Esto significa que el desarrollador no puede observar la visualización de una notificación programada y que no implica activar el trabajador de servicio hasta que el usuario interactúa con la notificación.
En consecuencia, actualmente no se conoce ninguna forma en que el desarrollador pueda obtener información sobre el usuario a través de enfoques que podrían invadir la privacidad, como la búsqueda de geolocalización 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
¿Hay algo en la API que no funciona 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 reproducir el error y establece Componentes en UI>Notifications. Glitch es excelente para compartir reproducciones de errores rápidas y fáciles.
¿Tienes pensado usar la API?
¿Planeas usar activadores de notificaciones en tu sitio? Tu asistencia pública nos ayuda a priorizar las funciones y les muestra a otros proveedores de navegadores lo importante que es admitirlas. Envía un tuit a @ChromiumDev con el hashtag #NotificationTriggers y cuéntanos dónde y cómo lo usas.
Vínculos útiles
- Explicación pública
- Demo de activadores de notificaciones | Fuente de la demo de activadores de notificaciones
- Error de seguimiento
- Entrada de ChromeStatus.com
- Componente Blink:
UI>Notifications
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.