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 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
Paso | 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 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.
![Se registró un evento de notificación programado en el panel Notificaciones de las Herramientas para desarrolladores de Chrome, ubicado en el panel Aplicaciones.](https://developer.chrome.google.cn/static/docs/web-platform/notification-triggers/image/a-scheduled-notification-1bbf14c57c2da.png?authuser=0000&hl=es)
![Se registró un evento de notificación mostrado en el panel de notificaciones de las Herramientas para desarrolladores de Chrome.](https://developer.chrome.google.cn/static/docs/web-platform/notification-triggers/image/a-displayed-notification-d54816e76c8f2.png?authuser=0000&hl=es)
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.
![Captura de pantalla de la app web de demostración de activadores de notificaciones.](https://developer.chrome.google.cn/static/docs/web-platform/notification-triggers/image/a-screenshot-the-notific-8bf4469e1c556.png?authuser=0000&hl=es)
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.