Detecta usuarios inactivos con la API de Idle Detection

Thomas Steiner

Publicado el 18 de mayo de 2020

Browser Support

La API de Idle Detection notifica a los desarrolladores cuando un usuario está inactivo, lo que indica aspectos como la falta de interacción con el teclado, el mouse, la pantalla, la activación de un protector de pantalla, el bloqueo de la pantalla o el cambio a otra pantalla. 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 puede comunicarse con sus contactos.
Las apps de kiosco expuestas públicamente, por ejemplo, en museos, pueden usar esta API para volver a la vista "principal" si 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 los momentos en que el usuario interactúa con su dispositivo.

Cómo usar la API

Para verificar si se admite la API de Idle Detection, usa lo siguiente:

if ('IdleDetector' in window) {
  // Idle Detector API supported
}

Conceptos de la API

La API de Idle Detection supone que existe cierto nivel de participación entre el usuario, el agente de usuario (es decir, el navegador) y el sistema operativo del dispositivo en uso. Esto se representa en dos dimensiones:

El estado de inactividad del usuario: active o idle: El usuario interactuó o no con el agente de usuario durante un período.
El estado de inactividad de la pantalla: locked o unlocked: El sistema tiene un bloqueo de pantalla activo (como un protector de pantalla) que impide la interacción con el agente de usuario.

Para distinguir active de idle, se requieren heurísticas que pueden diferir según el usuario, el agente de usuario y el sistema operativo. También debe ser un umbral razonablemente grueso (consulta Seguridad y permisos).

El modelo no distingue formalmente de forma intencional entre la interacción con contenido específico (es decir, la página web en una pestaña que usa la API), el agente de usuario en su totalidad o el sistema operativo. Esta definición se deja al agente de usuario.

Solicita permisos y crea instancias

El primer paso para usar la API de Idle Detection es asegurarse de que se haya otorgado el permiso 'idle-detection'. Si no se otorga el permiso, debes solicitarlo con IdleDetector.requestPermission(). Ten en cuenta que llamar a este método 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 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);
}

Cómo detener la detección de inactividad

Puedes anular la detección de inactividad llamando al método abort() de AbortController.

controller.abort();
console.log('IdleDetector is stopped.');

Compatibilidad con Herramientas para desarrolladores

Puedes emular eventos de inactividad en las Herramientas para desarrolladores sin estar inactivo. En Herramientas para desarrolladores, abre la pestaña Sensores y busca Emular el estado de detector inactivo. En el video, puedes ver las diferentes opciones.

Emulación del estado de Idle Detector en las Herramientas para desarrolladores.

Compatibilidad con Puppeteer

A partir de la versión 5.3.1 de Puppeteer, puedes emular los distintos estados de inactividad para probar de forma programática cómo cambia el comportamiento de tu app web.

Demostración

Puedes ver la API de Idle Detection en acción con la demostración de Ephemeral Canvas, que borra su contenido después de 60 segundos de inactividad. Podrías imaginar que esto se implementa en una tienda departamental para que los niños hagan garabatos.

Demostración de Lienzo efímero

Polyfill

Algunos aspectos de la API de Idle Detection se pueden polyfillar, y existen bibliotecas de detección de inactividad, como idle.ts, pero estos enfoques se limitan al área de contenido de una app web: la biblioteca que se ejecuta en el contexto de la app web debe sondear de forma costosa los eventos de entrada o escuchar los cambios de visibilidad. Sin embargo, de forma más restrictiva, las bibliotecas no pueden saber hoy cuándo un usuario está inactivo fuera de su área de contenido (p.ej., cuando un usuario está en otra pestaña o cerró la sesión de su computadora por completo).

Seguridad y permisos

El equipo de Chrome diseñó e implementó la API de Idle Detection con los principios fundamentales definidos en Controlling Access to Powerful Web Platform Features, que incluyen el control del usuario, la transparencia y la ergonomía. La capacidad de usar esta API se controla con el permiso 'idle-detection'. Para usar la API, una app también debe ejecutarse en un contexto seguro de nivel superior.

Privacidad y control del usuario

Siempre queremos evitar que los agentes maliciosos hagan un uso inadecuado de las APIs nuevas. Los sitios web que parecen independientes, pero que, de hecho, están controlados por la misma entidad, pueden obtener información sobre la inactividad del usuario y correlacionar los datos para identificar a los usuarios únicos en diferentes orígenes. Para mitigar este tipo de ataques, la API de Idle Detection limita la granularidad de los eventos de inactividad informados.

Comentarios

¿Hay algo en 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 correspondiente o agrega tus comentarios a un problema existente.

Informa 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? Presenta un error en new.crbug.com. Asegúrate de incluir tantos detalles como sea posible, instrucciones sencillas para reproducir el error y, luego, ingresa Blink>Input en el cuadro Components.

Cómo mostrar compatibilidad con la API

¿Planeas usar la API de Idle Detection? Tu apoyo público ayuda al equipo de Chrome a priorizar funciones y muestra a otros proveedores de navegadores lo importante que es admitirlas.

Comparte cómo planeas usarlo en el hilo de Discourse del WICG.
Envía un tweet a @ChromiumDev con el hashtag #IdleDetection y cuéntanos dónde y cómo lo usas.

Vínculos útiles

Agradecimientos

La API de Idle Detection fue implementada por Sam Goto. Maksim Sadym agregó la compatibilidad con Herramientas para desarrolladores. Gracias a Joe Medley, Kayce Basques y Reilly Grant por sus revisiones.