Los activadores de notificaciones le permiten programar notificaciones locales que no requieren una conexión de red, lo que las hace ideales para casos de uso como aplicaciones de calendario.
Actualizado
El desarrollo de Notification Triggers API, parte de Google
proyecto de capacidades, está actualmente en espera. Esta publicación se actualizará a medida que avance la implementación.
¿Qué son los activadores de notificaciones?
Los desarrolladores web pueden mostrar notificaciones mediante el
API de notificaciones web. Esta función se utiliza a menudo con API push para informar al usuario de información urgente, como noticias de última hora o mensajes recibidos. Las notificaciones se muestran ejecutando JavaScript en el dispositivo del usuario.
El problema con la API Push es que no es confiable para activar notificaciones que debe se mostrará cuando se cumpla una condición particular, como la hora o la ubicación. Un ejemplo de 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 condición basada en la ubicación es una notificación que le recuerda que debe comprar leche cuando ingresa a las inmediaciones de su supermercado. La conectividad de red o las funciones de conservación de la batería, como el modo dormido, pueden retrasar la entrega de notificaciones push.
Los activadores de notificaciones resuelven este problema al permitirle programar 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.
Por ahora, Chrome solo admite disparadores basados en el tiempo. Es posible que se agreguen en el futuro desencadenantes adicionales, como los desencadenantes basados en la ubicación, según la demanda de los desarrolladores.
Casos de uso
Las aplicaciones de calendario pueden utilizar activadores de notificación basados en el tiempo para recordarle al 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.
Una cadena de televisión puede recordar 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 a sus usuarios programar alarmas para conferencias telefónicas o videollamadas.
Estado actual
Paso | Estado |
---|---|
1. Crea un explicador | Completar |
2. Crear borrador inicial de especificación | No empezado |
3. Recopile comentarios y repita el diseño | En progreso |
4. Prueba de origen | Completar |
5. Lanzamiento | No empezado |
Una prueba de origen para la función, que dio a los desarrolladores la oportunidad de probar la API propuesta, se ejecutó de Chrome 80 a 83 y finalizó el 29 de julio de 2020. Desafortunadamente, no recibimos muchos registros y los comentarios que recibimos fueron no robusto. Por ahora, hemos decidido poner la API en pausa hasta nuevo aviso y no extender la prueba de origen. La función seguirá estando disponible detrás de la marca de funciones de la plataforma web experimental para que los desarrolladores experimenten con la API. Dado el interés futuro de los desarrolladores o los nuevos casos de uso, reconsideraremos la API y reanudaremos los esfuerzos para estandarizarla.
Cómo utilizar los activadores de notificaciones
Habilitación a través de chrome: // flags
Para experimentar con la API de activadores de notificaciones localmente, sin un token de prueba de origen, habilite el
#enable-experimental-web-platform-features
bandera en chrome://flags
.
Detección de características
Puede averiguar si el navegador es compatible con los activadores de notificación comprobando la existencia del
showTrigger
propiedad:
if ("showTrigger" in Notification.prototype) {
}
Programar una notificación
Programar una notificación es similar a mostrar una notificación push regular, excepto que debe pasar una showTrigger
condición de propiedad con un TimestampTrigger
objeto como el valor de la notificación options
objeto.
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)
});
};
En el escritorio, la notificación se activa solo si Chrome se está ejecutando. En Android, disparan independientemente.
Cancelar una notificación programada
Para cancelar las notificaciones programadas, primero solicite una lista de todas las notificaciones que coincidan con una determinada etiqueta a través de ServiceWorkerRegistration.getNotifications()
. Tenga en cuenta que debe pasar el
includeTriggered
marca 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 comenzar a depurar, presione Iniciar la grabación de eventos o
Controlar+mi (Mando+mi 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.

Una notificación programada.

Una notificación mostrada.
Manifestación
Puede ver los activadores de notificación en acción en el manifestación, que le permite programar notificaciones, enumerar notificaciones programadas y cancelarlas. El código fuente está disponible en
Falla.

Los disparadores de notificaciones manifestación.
Seguridad y permisos
El equipo de Chrome ha diseñado e implementado la API de activadores de notificaciones utilizando los principios básicos definidos en Controlar el acceso a las potentes funciones de la plataforma web, incluido el control del usuario, la transparencia y la ergonomía. Debido a que esta API requiere trabajadores de servicio, 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 una ServiceWorkerRegistration
. Esto implica que todos los datos requeridos se almacenan en el mismo contexto y se eliminan automáticamente cuando se elimina el trabajador del servicio o cuando el usuario elimina todos los datos del sitio para el origen. El bloqueo de cookies también evita que los trabajadores del servicio se instalen en Chrome y, por lo tanto, 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 hace referencia el badge
,
icon
y image
atributos. Esto significa que mostrar una notificación programada no es observable por el desarrollador y no implica despertar al trabajador del servicio hasta que el usuario interactúe con la notificación. En consecuencia, actualmente no existe una forma conocida de que el desarrollador pueda obtener información sobre el usuario a través de enfoques potencialmente invasores de la privacidad como la búsqueda de 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 el de Android.
AlarmManager
, lo que ayuda a conservar la batería.
Realimentación
El equipo de Chrome desea conocer sus 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 necesita para implementar su idea? ¿Tiene alguna pregunta o comentario sobre el modelo de seguridad? Presentar un problema de especificaciones en el Repositorio de GitHub de activadores de notificacioneso agregue sus pensamientos a un problema existente.
¿Problema con la implementación?
¿Encontraste un error con la implementación de Chrome? ¿O la implementación es diferente de la especificación? Presentar un error en new.crbug.com. Asegúrese de incluir todos los detalles que pueda, instrucciones sencillas para reproducir y configurar Componentes UI>Notifications
. Glitch funciona muy bien para compartir reproducciones de errores de forma rápida y sencilla.
¿Planea utilizar la API?
¿Planea usar activadores de notificación en su sitio? Su apoyo público nos ayuda a priorizar funciones y muestra a otros proveedores de navegadores lo importante que es darles soporte. Enviar un tweet a
@Cromodev con #notificationtriggers
y háganos saber dónde y cómo lo está usando.
Enlaces Útiles
Agradecimientos
Notification Triggers fue implementado por Richard Knoll
y el explicador escrito por Peter Beverloo, con contribuciones de Richard. Las siguientes personas han revisado el artículo:
Joe Medley, Pete LePage, así como Richard y Peter. Imagen de héroe por
Lukas Blazek en Unsplash.