Activadores de notificaciones

# ¿Qué son los activadores de notificaciones?

Los desarrolladores web pueden mostrar notificaciones mediante la API de notificaciones web. Esta función se utiliza a menudo con la API Push para informarle al usuario sobre información urgente, como noticias de última hora o mensajes recibidos. Las notificaciones se muestran al ejecutar JavaScript en el dispositivo del usuario.

El problema con la API Push es que no es confiable para activar notificaciones que deben mostrarse cuando se cumple una condición 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 le recuerda una reunión importante con su jefe a las 2 p.m. Un ejemplo de una condición basada en la ubicación es una notificación que le recuerda que debe comprar leche cuando ingresa en las cercanías de su supermercado. La conectividad de red o las funciones de conservación de la batería, como el modo de optimización de batería, pueden retrasar la entrega de notificaciones push.

Los activadores de notificaciones resuelven este problema al permitirle programar las notificaciones con su condición de activación por adelantado, de modo que el sistema operativo entregue la notificación en el momento adecuado incluso si no hay conectividad de red o el dispositivo está en modo de ahorro de batería.

# Casos de uso

Las aplicaciones de calendario pueden utilizar activadores de notificación basados en el tiempo para recordarle a un usuario las próximas reuniones. El esquema de notificación predeterminado para una aplicación de calendario podría ser mostrar una primera notificación una hora antes de una reunión y luego otra notificación más urgente cinco minutos antes.

Un canal de televisión puede recordarles a los usuarios que su programa de televisión favorito está a punto de comenzar o que está a punto de comenzar una transmisión en vivo de una conferencia.

Los sitios de conversión de zona horaria pueden utilizar activadores de notificación basados en el tiempo para permitir que sus usuarios programen alarmas para conferencias telefónicas o videollamadas.

# Estado actual

1. Crea un explicador | Completo
2. Crear el borrador inicial de especificación | Sin empezar
3. Recopilar comentarios y repetir el diseño. | En curso
4. Prueba de origen | Completa
5. Lanzamiento | Sin empezar

# Cómo usar los activadores de notificaciones

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

Para experimentar con la API de activadores de notificaciones localmente, sin un token de prueba de origen, habilite la marca #enable-experimental-web-platform-features en about://flags.

# Detección de características

Puede averiguar si el navegador es compatible con los activadores de notificaciones si comprueba la existencia de la propiedad showTrigger:

if ('showTrigger' in Notification.prototype) {
  /* Se admiten los activadores de notificación */
}

# Programar una notificación

Programar una notificación es similar a mostrar una notificación push regular, excepto que debe pasar una propiedad de condición showTrigger con un objeto TimestampTrigger como valor para el objeto de options de la notificación.

const createScheduledNotification = async (tag, title, timestamp) => {
  const registration = await navigator.serviceWorker.getRegistration();
  registration.showNotification(title, {
    tag: tag,
    body: 'Esta notificación se programó hace 30 segundos',
    showTrigger: new TimestampTrigger(timestamp + 30 * 1000),
  });
};

# Cancelar una notificación programada

Para cancelar las notificaciones programadas, primero solicite una lista de todas las notificaciones que coincidan con una determinada etiqueta mediante ServiceWorkerRegistration.getNotifications(). Tenga en cuenta que debe 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

Puede utilizar el panel de notificaciones de Chrome DevTools para depurar las notificaciones. Para iniciar la depuración, presione 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

Puede ver los activadores de notificaciones en acción en la demostración, que le permite programar notificaciones, enumerar las notificaciones programadas y cancelarlas. El código fuente está disponible en Glitch.

# Seguridad y permisos

El equipo de Chrome ha diseñado e implementado la API de activadores de notificaciones mediante los principios básicos definidos en Control del acceso a las funciones potentes de la plataforma web, incluido el control del usuario, la transparencia y la ergonomía. Debido a que esta API requiere service workers, también requiere un contexto seguro. El uso de la API requiere el mismo permiso que las notificaciones push habituales.

# Control de usuario

Esta API solo está disponible en el contexto de un parámetro ServiceWorkerRegistration. Esto implica que todos los datos requeridos se almacenan en el mismo contexto y se eliminan automáticamente cuando se elimina el service worker o cuando el usuario elimina todos los datos del sitio para el origen. El bloqueo de cookies también evita que los service workers se instalen en Chrome y, por lo tanto, evita que se utilice esta API. El usuario siempre puede desactivar las notificaciones para el sitio en la configuración del sitio.

# Transparencia

A diferencia de la API Push, esta API no depende de la red, lo que implica que las notificaciones programadas necesitan todos los datos necesarios de antemano, incluidos los recursos de imagen a los que hacen referencia los atributos badge, icon e image. Esto significa que mostrar una notificación programada no es observable por el desarrollador y no implica despertar al service worker hasta que el usuario interactúe con la notificación. En consecuencia, actualmente no existe una forma conocida para que el desarrollador pueda obtener información sobre el usuario a través de enfoques potencialmente invasores de la privacidad, como la búsqueda por geolocalización de direcciones IP. Este diseño también permite que la función aproveche opcionalmente los mecanismos de programación proporcionados por el sistema operativo, como AlarmManager de Android, que ayuda a ahorrar batería.

# Retroalimentación

El equipo de Chrome desea conocer sus experiencias con los activadores de notificaciones.

# Cuéntenos sobre el diseño de la API

¿Hay algo en la API que no funciona como esperaba? ¿Faltan métodos o propiedades que necesita para implementar su idea? ¿Tiene alguna pregunta o comentario sobre el modelo de seguridad? Presente un problema de especificación en el Repositorio de GitHub de activadores de notificaciones o agregue sus consideraciones a un problema existente.

# ¿Tiene problemas con la implementación?

¿Encontró un error con la implementación de Chrome? ¿O la implementación es diferente de la especificación? Presente un error en new.crbug.com. Asegúrese de incluir todos los detalles que pueda, instrucciones simples para la reproducción y configure los Componentes en UI>Notifications. Glitch funciona muy bien para compartir reproducciones de errores de forma rápida y sencilla.

# ¿Pienza utilizar la API?

¿Piensa utilizar los activadores de notificaciones en su sitio? Su apoyo público nos ayuda a priorizar las funciones y les muestra a otros proveedores de navegadores lo importante que es darles soporte. Envíe un tuit a @ChromiumDev mediante el hashtag #NotificationTriggers y háganos saber dónde y cómo los está usando.

# Enlaces útiles

• Explicador público
• Demostración de activadores de notificaciones | Fuente de la demostración de los activadores de notificaciones
• Seguimiento de errores
• Entrada de ChromeStatus.com
• Componente Blink: UI>Notifications

# Agradecimientos

Los activadores de notificaciones fueron implementados por Richard Knoll y el explicador fue escrito por Peter Beverloo, con contribuciones de Richard. Las siguientes personas revisaron el artículo: Joe Medley, Pete LePage, así como tmbién Richard y Peter. Imagen hero de Lukas Blazek en Unsplash.