Detecta usuarios inactivos con la API de Idle Detection

Usa la API de Idle Detection para averiguar 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 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 o idle: El usuario interactuó con el usuario-agente o no durante un período determinado.
• 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 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.');
}

Nota: Inicialmente, la detección de inactividad se restringía detrás del permiso de notificaciones. Si bien muchos casos de uso de esta API, pero no todos, involucran notificaciones, los editores de especificaciones de Idle Detection decidieron restringirla detrás de un permiso dedicado de detección de inactividad.

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.

Emulación del estado del detector de estado inactivo en 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 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.