Los activadores de notificaciones te permiten programar notificaciones locales que no requieren una 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 con la API de notificaciones web. Esta función suele usarse con la API de Push para informar al usuario sobre información urgente, como eventos con noticias de último momento o mensajes recibidos. Las notificaciones se muestran ejecutando JavaScript en el dispositivo del usuario.
El problema con la API de Push es que no es confiable para activar notificaciones que se deben mostrar 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 según la ubicación es una notificación que te recuerda comprar leche cuando ingreses a las inmediaciones de tu supermercado. La conectividad de red o las funciones para ahorrar 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 por adelantado, de modo que el sistema operativo envíe la notificación en el momento adecuado, incluso si no hay conexión de red o el dispositivo está en modo de ahorro de batería.
Casos de uso
Las aplicaciones de calendario pueden usar activadores de notificaciones basados en la hora para recordarle a los usuarios las 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 la reunión y, luego, otra más urgente cinco minutos antes.
Una cadena de TV puede recordarles a los usuarios que su programa de TV favorito está por comenzar o que una transmisión en vivo de conferencia está por comenzar.
Los sitios de conversión de zona horaria pueden usar activadores de notificaciones basados en el tiempo a fin de permitir que sus 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 | No iniciada |
| 3. Recopila comentarios y, luego, itera sobre el diseño. | En curso |
| 4. Prueba de origen | Completado |
| 5. Lanzamiento | No iniciada |
Cómo usar los activadores de notificaciones
Habilitación 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 atributos
Para averiguar si el navegador es compatible con los activadores de notificaciones, comprueba 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, con la excepción de que debes pasar una propiedad de condición showTrigger con un objeto TimestampTrigger como valor del 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 mediante 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 Chrome DevTools 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 graban todos los eventos de notificación, incluidas las notificaciones programadas, mostradas y cerradas, durante tres días, incluso cuando Herramientas para desarrolladores está cerrado.
Demostración
Puedes ver los activadores de notificaciones en acción en la demostración, lo que te permite programar notificaciones, enumerar las 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 activadores de notificaciones mediante los principios fundamentales definidos en el artículo Cómo 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 una ServiceWorkerRegistration. Esto implica que todos los datos requeridos se almacenan en el mismo contexto y se borran automáticamente cuando se borra el service worker o cuando el usuario borra todos los datos del sitio del origen. El bloqueo de cookies también impide que los service
workers se instalen en Chrome y, por lo tanto, que se use esta API. El usuario siempre puede inhabilitar las notificaciones 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 mostrar una notificación programada no es observable por el desarrollador y no implica activar el service worker hasta que el usuario interactúe con la notificación.
En consecuencia, actualmente no se conoce una manera conocida en la que el desarrollador pueda obtener información sobre el usuario a través de enfoques que puedan 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 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 API
¿Hay algo acerca de 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 los activadores de notificaciones o agrega lo que piensas sobre un problema existente.
¿Tienes problemas con la implementación?
¿Encontraste un error en la implementación de Chrome? ¿La implementación es diferente de la especificación?
Informa un error en new.crbug.com. Asegúrate de incluir todos los detalles que puedas, instrucciones simples para la reproducción y configura los componentes como UI>Notifications. Glitch funciona muy bien para compartir reproducciones de errores rápidas y fáciles.
¿Piensas usar la API?
¿Planeas usar activadores de notificaciones en tu sitio? Tu apoyo público nos ayuda a priorizar 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 estás usando.
Vínculos útiles
- Explicación pública
- Demostración de activadores de notificación | Fuente de la demostración de activadores de notificación
- Error de seguimiento
- Entrada de ChromeStatus.com
- Componente de Blink:
UI>Notifications
Agradecimientos
Richard Knoll implementó los activadores de notificación y la explicación escrita por Peter Beverloo, con contribuciones de Richard. Las siguientes personas revisaron el artículo: Joe Medley, Pete LePage, así como Richard y Peter. Hero image de Lukas Blazek en Unsplash.