Detecta usuarios inactivos con la API de detección de inactividad

# ¿Qué es la API de detección de inactividad?

La API de detección de inactividad notifica a los desarrolladores cuando un usuario está inactivo, indicando cosas como 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 una pantalla diferente. Un umbral definido por el desarrollador activa la notificación.

# Casos de uso sugeridos para la API de detección de inactividad

Algunos ejemplos de sitios que pueden utilizar esta API son:

• Las aplicaciones de chat o los sitios de redes sociales en línea pueden utilizar esta API para que el usuario sepa si sus contactos están disponibles actualmente.
• Las aplicaciones de kiosco expuestas públicamente, por ejemplo en los museos, pueden usar esta API para volver a la vista "de inicio" si ya nadie interactúa con el kiosco.
• Las aplicaciones 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

# Cómo utilizar la API de detección de inactividad

# Detección de características

Para comprobar si la API de detección de inactividad es compatible, utiliza:

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

# Conceptos de la API de detección de inactividad

La API de detección de inactividad asume que existe algún nivel de interacció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 inactivo del usuario: active o idle: el usuario ha interactuado o no con el agente de usuario durante un período de tiempo.
• El estado inactivo de la pantalla: locked o unlocked: el sistema tiene un bloqueo de pantalla activo (como un protector de pantalla) que evita la interacción con el agente de usuario.

Distinguir entre active e idle requiere heurísticas que pueden diferir entre el usuario, el agente de usuario y el sistema operativo. También debería ser un umbral razonablemente aproximado (consulta Seguridad y Permisos).

El modelo intencionadamente no distingue formalmente entre la interacción con un contenido concreto (es decir, la página web en una pestaña que utiliza la API), el agente de usuario en su conjunto o el sistema operativo; esta definición se deja al agente de usuario.

# Uso de la API de detección de inactividad

El primer paso al utilizar la API de detección de inactividad es garantizar que se conceda el permiso de '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 de 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 del IdleDetector. El threshold mínimo es 60.000 milisegundos (1 minuto). Finalmente puedes iniciar la detección inactiva llamando al IdleDetector start() IdleDetector. Toma como parámetro un objeto con el threshold de inactividad deseado en milisegundos y una signal opcional con AbortSignal para abortar la detección de inactividad.

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 abortar la detección de inactividad llamando al método AbortController abort() de AbortController.

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

# Soporte de DevTools

A partir de Chromium 94, puedes emular eventos inactivos en DevTools sin estar realmente inactivo. En DevTools, abre la pestaña Sensores y busca el estado Emular detector inactivo. Puedes ver las diversas opciones en el video a continuación.

# Soporte de Puppeteer

A partir de la versión 5.3.1 de Puppeteer, puedes emular los distintos estados inactivos para probar mediante programación cómo cambia el comportamiento de tu aplicación web.

# Demo

Puedes ver la API de detección de inactividad en acción con la demo de Ephemeral Canvas que borra su contenido después de 60 segundos de inactividad. Podrías imaginarte esto desplegado en unos grandes almacenes para que los niños garabateen en ellos.

# Polyfilling

Algunos aspectos de la API de detección de inactividad son polyfillable y existen bibliotecas de detección de inactividad como idle.ts, pero estos enfoques están restringidos al área de contenido de una aplicación web: la biblioteca que se ejecuta en el contexto de la aplicación web debe realizar un sondeo costoso para eventos de entrada o escuchar los cambios de visibilidad. Además, las bibliotecas no pueden saber cuándo un usuario está inactivo fuera de su área de contenido (por ejemplo, cuando un usuario está en una pestaña diferente o ha cerrado la sesión de su computadora).

# Seguridad y permisos

El equipo de Chrome ha diseñado e implementado la API de detección de inactividad utilizando los principios básicos definidos en Control del acceso a las funciones de la plataforma web de gran alcance, incluido el control del usuario, la transparencia y la ergonomía. La capacidad de utilizar esta API está controlada por el permiso de 'idle-detection'. Para utilizar la API, una aplicación también debe ejecutarse en un contexto seguro de nivel superior.

# Control de usuario y privacidad

Siempre queremos evitar que los actores malintencionados hagan un mal uso de las nuevas APIs. Los sitios web aparentemente independientes, pero que de hecho están controlados por la misma entidad, pueden obtener información inactiva del usuario y correlacionar los datos para identificar usuarios únicos en todos los orígenes. Para mitigar este tipo de ataques, la API de detección de inactividad limita la granularidad de los eventos inactivos informados.

# Comentarios

El equipo de Chrome desea conocer tus experiencias con la API de detección de inactividad.

# Contanos sobre el diseño de la API

¿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? Presenta un problema de especificación en el repositorio de GitHub correspondiente o agrega tus ideas a un tema ya existente.

# Informar un problema con la implementación

¿Encontraste un error con 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 todos los detalles que puedas, instrucciones simples para reproducir e ingresa Blink>Input en el cuadro Componentes. Glitch funciona muy bien para compartir repros rápidos y fáciles.

# Demuestra tu apoyo a la API

¿Estás pensando en utilizar la API de detección de inactividad? Su soporte público ayuda al equipo de Chrome a priorizar las funciones y muestra a otros proveedores de navegadores lo importante que es brindarles soporte.

• Comparte cómo planeas usarlo en el hilo del discurso de WICG.
• Envía un tweet a @ChromiumDev usando el hashtag #IdleDetection y haznos saber dónde y cómo lo estás usando.

# Enlaces útiles

• Explicador público
• Proyecto de especificación
• Demo de la API de detección de inactividad | Fuente de demo de la API de detección inactiva
• Error de seguimiento
• Entrada de ChromeStatus.com
• Componente intermitente: Blink>Input

# Agradecimientos

Sam Goto implementó la API de detección de inactividad. Maksim Sadym agregó la compatibilidad con DevTools. Gracias a Joe Medley, Kayce Basques y Reilly Grant por sus reseñas de este artículo. La imagen heroica es de Fernando Hernandez en Unsplash.