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.
¿Qué son los activadores de notificaciones?
Los desarrolladores web pueden mostrar notificaciones mediante 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 último momento o mensajes recibidos. Las notificaciones se muestran ejecutando JavaScript en el dispositivo del usuario.
El problema de 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 la hora 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 comprar leche cuando ingresas a las proximidades de tu tienda de comestibles. La conectividad de red o las funciones de preservación de 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 las notificaciones con su condición de activación por adelantado, de modo que el sistema operativo entregue 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 notificaciones basados en el horario para recordarle a un usuario sobre 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 red de TV podría recordarles a los usuarios que su programa de TV favorito está a punto de comenzar o que está por comenzar una transmisión en vivo de una conferencia.
Los sitios de conversión de zona horaria pueden usar activadores de notificaciones basados en el tiempo para permitir que los usuarios programen alarmas para conferencias telefónicas o videollamadas.
Estado actual
| Step | Estado |
|---|---|
| 1. Crear explicación | Completo |
| 2. Crea el borrador inicial de la especificación | Sin iniciar |
| 3. Recopila comentarios y también itera en el diseño. | En curso |
| 4. Prueba de origen | Completado |
| 5. Lanzamiento | Sin iniciar |
Cómo usar los activadores de notificaciones
Habilitando mediante about://flags
Para experimentar con la API de activadores de notificaciones de forma local, sin un token de prueba de origen, habilita la marca #enable-experimental-web-platform-features en about://flags.
Detección de funciones
Para saber si el navegador admite activadores de notificaciones, verifica la existencia de 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),
});
};
Cancela una notificación programada
Para cancelar las 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 las Herramientas para desarrolladores de Chrome para depurar las notificaciones. Para iniciar la depuración, presiona Start recording events
o Control + E (Comando + E en Mac). Las Herramientas para desarrolladores de Chrome registran todos los eventos de notificaciones, incluidas las notificaciones programadas, mostradas y cerradas, durante tres días, incluso cuando las Herramientas para desarrolladores están cerradas.
Demostración
Puedes ver los activadores de notificaciones en acción en la demostración, que te permite programar notificaciones, enumerarlas 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 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 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 todos
los datos necesarios se almacenan en el mismo contexto y se borran automáticamente cuando se borra el service worker
o el usuario borra todos los datos del sitio del origen. Si bloqueas las cookies, también evitarás que se instalen service
workers en Chrome y, por lo tanto, no se use esta API. El usuario siempre puede inhabilitar las notificaciones para el sitio desde 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 acceda de manera opcional a los mecanismos de programación que proporciona el sistema operativo, como AlarmManager de Android, que ayuda a conservar la 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? ¿Tienes alguna pregunta o comentario sobre el modelo de seguridad? Informa un problema de especificaciones en el repositorio de GitHub de activadores de notificaciones o agrega lo que piensas sobre 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 la mayor cantidad de detalles posible, instrucciones simples para la reproducción y la configuración de Componentes como 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 funciones y les muestra a otros proveedores de navegadores la importancia de admitirlas. Envía un tweet a @ChromiumDev con el hashtag #NotificationTriggers y cuéntanos dónde y cómo lo usas.
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ó Notification Triggers y la explicación escrita por Peter Beverloo, con 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.