Usa la API de Idle Detection para averiguar cuándo el usuario no está usando activamente su dispositivo.
¿Qué es la API de Idle Detection?
La API de Idle Detection notifica a los desarrolladores cuando un usuario está inactivo y señala la falta de interacción con el teclado, el mouse o la pantalla, la activación de un protector de pantalla, el bloqueo de la pantalla o el movimiento a una pantalla diferente. Un umbral definido por el desarrollador activa la notificación.
Casos de uso sugeridos para la API de Idle Detection
Estos son algunos ejemplos de sitios que pueden usar esta API:
- Las aplicaciones de chat o los sitios de redes sociales en línea pueden usar esta API para informar al usuario si sus contactos están disponibles en ese momento.
- Las aplicaciones de kiosco expuestas públicamente, por ejemplo, en museos, pueden usar esta API para regresar a la vista de "inicio" si ya nadie interactúa con el kiosco.
- Las apps que requieren cálculos costosos, por ejemplo, para dibujar gráficos, pueden limitar estos cálculos a momentos en los que el usuario interactúa con su dispositivo.
Estado actual
Step | Estado |
---|---|
1. Crear explicación | Completo |
2. Crea el borrador inicial de la especificación | Completo |
3. Recopila comentarios e itera en el diseño | En curso |
4. Prueba de origen | Completada |
5. Lanzamiento | Chromium 94 |
Cómo usar la API de Idle Detection
Detección de funciones
Para verificar si la API de Idle Detection es compatible, usa el siguiente código:
if ('IdleDetector' in window) {
// Idle Detector API supported
}
Conceptos de la API de Idle Detection
La API de Idle Detection supone que existe algún nivel de interacción entre el usuario, el usuario-agente (es decir, el navegador) y el sistema operativo del dispositivo en uso. Esto se representa en dos dimensiones:
- Estado inactivo del usuario:
active
oidle
: El usuario interactuó con el usuario-agente o no durante un período determinado. - Estado de inactividad de la pantalla:
locked
ounlocked
: El sistema tiene un bloqueo de pantalla activo (como un protector de pantalla) que impide la interacción con el usuario-agente.
Para distinguir active
de idle
, se requiere una heurística que puede variar según el usuario, el usuario-agente y el sistema operativo. También debe ser un umbral razonablemente aproximado (consulta Seguridad y permisos).
El modelo no distingue formalmente entre la interacción con un contenido en particular (es decir, la página web en una pestaña que usa la API), el usuario-agente en su conjunto o el sistema operativo. Esta definición queda a cargo del usuario-agente.
Usa la API de Idle Detection
El primer paso cuando se usa la API de Idle Detection es asegurarte de que se otorgue el permiso 'idle-detection'
.
Si no se otorga el permiso, debes solicitarlo a través de IdleDetector.requestPermission()
.
Ten en cuenta que para llamar a este método se requiere un gesto del usuario.
// Make sure 'idle-detection' permission is granted.
const state = await IdleDetector.requestPermission();
if (state !== 'granted') {
// Need to request permission first.
return console.log('Idle detection permission not granted.');
}
El segundo paso es crear una instancia de IdleDetector
.
El valor mínimo de threshold
es de 60,000 milisegundos (1 minuto).
Por último, puedes iniciar la detección de inactividad llamando al método start()
de IdleDetector
.
Toma un objeto con el threshold
inactivo deseado en milisegundos y un signal
opcional con un AbortSignal
para anular la detección de inactividad como parámetros.
try {
const controller = new AbortController();
const signal = controller.signal;
const idleDetector = new IdleDetector();
idleDetector.addEventListener('change', () => {
const userState = idleDetector.userState;
const screenState = idleDetector.screenState;
console.log(`Idle change: ${userState}, ${screenState}.`);
});
await idleDetector.start({
threshold: 60000,
signal,
});
console.log('IdleDetector is active.');
} catch (err) {
// Deal with initialization errors like permission denied,
// running outside of top-level frame, etc.
console.error(err.name, err.message);
}
Puedes anular la detección de inactividad llamando al método abort()
de AbortController
.
controller.abort();
console.log('IdleDetector is stopped.');
Asistencia para Herramientas para desarrolladores
A partir de Chromium 94, puedes emular eventos inactivos en Herramientas para desarrolladores sin quedar realmente inactivo. En Herramientas para desarrolladores, abre la pestaña Sensores y busca Emular el estado del detector inactivo. Puedes ver las distintas opciones en el siguiente video.
Compatibilidad con Puppeteer
A partir de la versión 5.3.1 de Puppeteer, puedes emular los distintos estados de inactividad para probar de manera programática cómo cambia el comportamiento de tu aplicación web.
Demostración
Puedes ver la API de Idle Detection en acción con la demostración de lienzo efímero, que borra su contenido después de 60 segundos de inactividad. Imagina que se implementa en una tienda departamental para que los niños hagan garabatos.
Polirelleno
Algunos aspectos de la API de Idle Detection son bibliotecas de detección de inactividad y que se pueden policompletar, como idle.ts, pero estos enfoques están limitados al área de contenido propia de una app web: la biblioteca que se ejecuta en el contexto de la app web necesita realizar sondeos costosos en busca de eventos de entrada o detectar cambios de visibilidad. Sin embargo, en la actualidad, las bibliotecas no pueden detectar si un usuario está inactivo fuera de su área de contenido (p.ej., cuando un usuario está en una pestaña diferente o sale de su computadora por completo).
Seguridad y permisos
El equipo de Chrome diseñó e implementó la API de Idle Detection mediante los principios básicos definidos en Cómo controlar el acceso a funciones potentes de la plataforma web, incluidos el control de usuario, la transparencia y la ergonomía.
La capacidad de usar esta API se controla con el permiso 'idle-detection'
.
Para usar la API, la app también debe ejecutarse en un contexto seguro de nivel superior.
Control y privacidad del usuario
Siempre queremos evitar que actores maliciosos hagan un uso inadecuado de las nuevas APIs. Los sitios web aparentemente independientes, pero que, de hecho, están controlados por la misma entidad, pueden obtener información de inactividad del usuario y correlacionar los datos para identificar a usuarios únicos en todos los orígenes. Para mitigar este tipo de ataques, la API de Idle Detection limita el nivel de detalle de los eventos inactivos informados.
Comentarios
El equipo de Chrome quiere conocer tus experiencias con la API de Idle Detection.
Cuéntanos sobre el diseño de la 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 especificaciones en el repositorio de GitHub correspondiente o agrega tus ideas a un problema existente.
Informar un problema 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, además de instrucciones simples para reproducir el error, y, luego, ingresa Blink>Input
en el cuadro Componentes.
Glitch funciona muy bien para compartir repros rápidos y fáciles.
Muestra compatibilidad con la API
¿Planeas usar la API de Idle Detection? Tu asistencia pública ayuda al equipo de Chrome a priorizar funciones y le muestra a otros proveedores de navegadores la importancia de brindar compatibilidad.
- Comparte cómo planeas usarlo en la conversación del discurso de WICG.
- Envía un tweet a @ChromiumDev con el hashtag
#IdleDetection
y cuéntanos dónde y cómo lo usas.
Vínculos útiles
- Explicación pública
- Especificación del borrador
- Demostración de la API de Idle Detection | Fuente de la demostración de la API de Idle Detection
- Error de seguimiento
- Entrada de ChromeStatus.com
- Componente de Blink:
Blink>Input
Agradecimientos
Sam Goto implementó la API de Idle Detection. Maksim Sadym agregó la compatibilidad con las Herramientas para desarrolladores. Agradecemos a Joe Medley, Kayce Basques y Reilly Grant por sus opiniones de este artículo. La imagen hero es de Fernando Hernandez en Unsplash.