Detecta usuarios inactivos con la API de Idle Detection

Usa la API de Idle Detection para saber cuándo el usuario no está usando activamente su dispositivo.

Thomas Steiner

¿Qué es la API de Idle Detection?

La API de Idle Detection notifica a los desarrolladores cuando un usuario está inactivo, indicando cosas como la falta de interacción con el teclado, mouse, pantalla, activación de un protector de pantalla, bloqueo de la pantalla o pasar 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 son accesibles.
  • Las aplicaciones de kiosco expuestas públicamente, por ejemplo, en museos, pueden usar esta API para volver a la pantalla principal. ver 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 los momentos en los que el usuario interactúa con su dispositivo.

Estado actual

Paso Estado
1. Crear explicación Completo
2. Crea el borrador inicial de la especificación Completo
3. Recopila comentarios y iterar en el diseño En curso
4. Prueba de origen Completado
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 lo siguiente:

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

Conceptos de la API de Idle Detection

La API de Idle Detection da por sentado que existe algún nivel de participació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:

  • El estado inactivo del usuario: active o idle: el usuario tiene o no. interactuó con el usuario-agente durante un tiempo.
  • 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. interacción con el usuario-agente.

Para distinguir active de idle, se requieren heurísticas que pueden variar en función del usuario, el usuario-agente y sistema operativo. También debe ser un umbral razonablemente aproximado (consulta Seguridad y permisos).

El modelo no distingue de manera formal entre la interacción con un contenido en particular (es decir, la página web en una pestaña que utiliza la API), el usuario-agente en su totalidad o el sistema operativo; esta definición queda en manos del usuario-agente.

Usa la API de Idle Detection

El primer paso para usar la API de Idle Detection es para 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 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.');
}

Luego, el segundo paso es crear una instancia de IdleDetector. El threshold mínimo es 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 de inactividad 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);
}

Para anular la detección de inactividad, llama al De AbortController abort() .

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

Compatibilidad con Herramientas para desarrolladores

A partir de Chromium 94, puedes emular los eventos de inactividad en Herramientas para desarrolladores sin estar realmente inactivo. En las Herramientas para desarrolladores, abre la pestaña Sensores y busca Emulate Idle Detector state. Puedes ver las diversas opciones en el siguiente video.

. Emulación de estado del detector inactivo en Herramientas para desarrolladores.

Compatibilidad con Puppeteer

A partir de la versión 5.3.1 de Puppeteer, puedes emular los distintos estados inactivos para probar de forma 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 del lienzo efímero, que borra su tras 60 segundos de inactividad. Puedes imaginar que esto se implementa en un departamento donde los niños pueden dibujar.

Demostración de lienzo efímero

Polyfill

Algunos aspectos de la API de Idle Detection son polifillables. y bibliotecas de detección de inactividad, como idle.ts, pero estos enfoques se limitan al área de contenido propia de una aplicación web: La biblioteca que se ejecuta en el contexto de la aplicación web debe realizar un sondeo costoso en busca de eventos de entrada o detectar cambios en la visibilidad. Sin embargo, de manera más restrictiva, las bibliotecas no pueden indicar hoy en día cuando un usuario está inactivo fuera del área de contenido (p.ej., cuando un usuario está en una pestaña diferente o salido de ella por completo).

Seguridad y permisos

El equipo de Chrome diseñó e implementó la API de Idle Detection con los principios fundamentales. se define en Controla el acceso a las funciones potentes de la plataforma web, incluidos el control de usuario, la transparencia y la ergonomía. La capacidad de usar esta API está controlada por el Permiso 'idle-detection'. Para usar la API, una app también debe ejecutarse en un contexto seguro de nivel superior.

Control y privacidad del usuario

Siempre queremos evitar que actores maliciosos usen las nuevas APIs de forma inadecuada. Sitios web que aparentan ser independientes, pero que, en realidad, están controlados por la misma entidad, podrían obtener información de inactividad del usuario y y correlaciona los datos para identificar a los 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 tu experiencia con la API de Idle Detection.

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 correspondiente. o agrega lo que piensas 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 instrucciones simples de reproducción y, luego, ingresa Blink>Input en el cuadro Componentes. Glitch funciona muy bien para compartir repros rápidos y fáciles.

Demuestra compatibilidad con la API

¿Planeas usar la API de Idle Detection? Tu asistencia pública ayuda al equipo de Chrome a prioriza funciones y muestra a otros proveedores de navegadores la importancia de admitirlas.

Vínculos útiles

Agradecimientos

Sam Goto implementó la API de Idle Detection. Maksim Sadym agregó la compatibilidad con Herramientas para desarrolladores. Gracias a Joe Medley, Kayce Basques y Reilly Grant por sus opiniones sobre este artículo. La imagen hero es de Fernando Hernandez en Retiro: