API de Notification Triggers

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

Thomas Steiner

¿Qué son los activadores de notificaciones?

Los desarrolladores web pueden mostrar notificaciones usando el API de notificaciones web: Esta función se suele usar con el API de Push para informar al usuario sobre información urgente, como como eventos de noticias de último momento o mensajes recibidos. Las notificaciones se muestran ejecutando JavaScript en la el dispositivo del usuario.

El problema con la API de Push es que no es confiable para activar notificaciones que deben ser cuando se cumple una condición determinada, como la hora o la ubicación. Un ejemplo de un sistema basado en el tiempo condición es una notificación de calendario que le recuerda una reunión importante con su jefe a la(s) 2 p.m. Un ejemplo de una condición basada en la ubicación es una notificación que te recuerda comprar leche. cuando ingreses a las proximidades de tu tienda de comestibles. Conectividad de red o ahorro de batería funciones como el modo Descanso pueden retrasar la entrega de notificaciones push.

Los activadores de notificaciones resuelven este problema, ya que te permiten programar las notificaciones con su activación con anticipación para que el sistema operativo envíe la notificación en el momento correcto 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 notificación basados en el horario para recordarle a un usuario los próximos eventos del reuniones. El esquema predeterminado de notificaciones para una app de calendario podría ser mostrar un primer aviso notificación una hora antes de la reunión y, luego, otra notificación más urgente cinco minutos antes.

Una red de TV podría recordarles a los usuarios que su programa de TV favorito está por comenzar o una conferencia en vivo. está por comenzar.

Los sitios de conversión de zona horaria pueden usar activadores de notificaciones basados en el horario para permitir que los usuarios programen alarmas para conferencias telefónicas o videollamadas.

Estado actual

Cómo usar los activadores de notificaciones

Habilitando mediante about://flags

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

Detección de funciones

Para saber si el navegador admite los activadores de notificaciones, verifica la existencia del 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 pasa una propiedad de condición showTrigger con un objeto TimestampTrigger como valor al el 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),
  });
};

Cancela una notificación programada

Para cancelar las notificaciones programadas, primero solicita una lista de todas las notificaciones que coincidan con un determinado etiqueta a través de ServiceWorkerRegistration.getNotifications(). Ten en cuenta que debes pasar el 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 las Herramientas para desarrolladores de Chrome para depurar las notificaciones. Para empezar depuración, presiona Iniciar la grabación de eventos o Control + E (Comando + E en Mac). Registros de las Herramientas para desarrolladores de Chrome todos los eventos de notificación, incluidas las notificaciones programadas, mostradas y cerradas, durante tres días incluso cuando se cierra Herramientas para desarrolladores.

Demostración

Puedes ver los activadores de notificaciones en acción en la demostración, lo que te permite programar mostrar notificaciones programadas y cancelarlas. El código fuente está disponible en Error.

Seguridad y permisos

El equipo de Chrome diseñó e implementó la API de Notification Triggers según los principios básicos se definen en Controla el acceso a las funciones potentes de la plataforma web, incluida la información la transparencia y la ergonomía. Como esta API requiere service workers, también requiere un contexto seguro. Para usar la API, se requieren los mismos permisos que las notificaciones push normales.

Control de usuarios

Esta API solo está disponible en el contexto de ServiceWorkerRegistration. Esto implica que todo los datos requeridos se almacenan en el mismo contexto y se eliminan automáticamente cuando el service worker se o el usuario borrará todos los datos de sitios del origen. Bloquear cookies también evita que los servicios que los trabajadores de primera línea se instalen en Chrome y, por lo tanto, no se use esta API. Las notificaciones pueden siempre que el usuario la inhabilite en la configuración del sitio.

Transparencia

A diferencia de la Push API, esta API no depende de la red, lo que implica notificaciones programadas. Si necesitas todos los datos requeridos de antemano, incluidos los recursos de imagen a los que hacen referencia badge, icon y image Esto significa que el desarrollador no puede observar 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. mediante enfoques que podrían invadir 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, que ayuda a ahorrar batería.

Comentarios

El equipo de Chrome quiere conocer tu experiencia con los activadores de notificaciones.

Cuéntanos sobre el diseño de la API

¿Algo en la API no funciona como esperabas? ¿O faltan métodos o propiedades que necesitas para implementar tu idea? Haz una pregunta o comentario sobre la seguridad modelo? Informa un problema de especificaciones en el repositorio de GitHub de activadores de notificaciones o agrega lo que piensas al un problema existente.

¿Tiene problemas con la implementación?

¿Encontraste un error en la implementación de Chrome? ¿O la implementación es diferente de la especificación? Informa un error en new.crbug.com. Asegúrate de incluir tantos detalles como puedas instrucciones sencillas para reproducir y establece Componentes en UI>Notifications. Glitch funciona muy bien para compartir reproducciones de errores rápidas y fáciles.

¿Piensas usar la API?

¿Piensas usar activadores de notificaciones en tu sitio? Tu apoyo público nos ayuda a priorizar y muestra a otros proveedores de navegadores la importancia de admitirlas. Enviar un tweet a @ChromiumDev con el hashtag #NotificationTriggers y cuéntanos dónde y cómo la utilizas.

Vínculos útiles

• Explicación pública
• Demostración de activadores de notificaciones | Fuente de la demostración de activadores de notificaciones
• Seguimiento de errores
• Entrada de ChromeStatus.com
• Componente de parpadeo: UI>Notifications

Agradecimientos

Richard Knoll implementó los activadores de notificaciones y la explicación escrita por Peter Beverloo, con las contribuciones de Richard. Las siguientes personas revisaron el artículo: Joe Medley, Pete LePage y Richard y Peter. Hero image de Lukas Blazek en Unsplash.