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

Utilice la API de detección de inactividad para averiguar cuándo el usuario no está utilizando activamente su dispositivo.

18 de mayo de 2020
Actualizado 2 de oct de 2020

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

La API de Idle Detection 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

Ejemplos de sitios que pueden usar esta API incluyen:

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

Habilitación a través de chrome: // flags

Para experimentar con la API de detección de inactividad localmente, sin un token de prueba de origen, habilite el
#enable-experimental-web-platform-features bandera en chrome://flags.

Habilitación de soporte durante la fase de prueba de origen

A partir de Chrome 84, la API de detección de inactividad estará disponible como prueba de origen. Se espera que la prueba de origen finalice en Chrome 86.

Las pruebas de Origin le permiten probar nuevas funciones y brindar comentarios sobre su usabilidad, practicidad y efectividad a la comunidad de estándares web. Para obtener más información, consulte el Guía de pruebas de Origin para desarrolladores web. Para inscribirse en esta u otra prueba de origen, visite el página de registro.

Regístrese para la prueba de origen

1. Solicita un token por tu origen.
2. Agrega el token a tus páginas. Hay dos maneras de hacerlo:
   • Agregar un origin-trial <meta> etiqueta al encabezado de cada página. Por ejemplo, esto puede verse así:
     <meta http-equiv="origin-trial" content="TOKEN_GOES_HERE">
   • Si puede configurar su servidor, también puede agregar el token usando un Origin-Trial Encabezado HTTP. El encabezado de respuesta resultante debería verse así:
     Origin-Trial: TOKEN_GOES_HERE

Detección de características

Para verificar si la API de detección de inactividad es compatible, use:

if ('IdleDetector' in window) {
}

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.

Distintivo active desde idle requiere heurísticas que pueden diferir según el usuario, el agente de usuario y el sistema operativo. También debe ser un umbral bastante aproximado (consulte Seguridad y permisos).

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

Uso de la API de detección de inactividad

El primer paso al utilizar la API de detección de inactividad es asegurarse de que 'idle-detection' se concede el permiso. Si no se otorga el permiso, debe solicitarlo a través de IdleDetector.requestPermission(). Tenga en cuenta que llamar a este método requiere un gesto de usuario.

const state = await IdleDetector.requestPermission();
if (state !== 'granted') {
return console.log('Idle detection permission not granted.');
}

El segundo paso es entonces instanciar el IdleDetector. El mínimo threshold es 60.000 milisegundos (1 minuto). Finalmente puede iniciar la detección inactiva llamando al
IdleDetectores start() método. Toma un objeto con el inactivo deseado threshold en milisegundos y opcional signal con un
AbortSignal

para abortar la detección inactiva 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) {
console.error(err.name, err.message);
}

Puede abortar la detección inactiva llamando al
AbortControlleres
abort()

método.

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

Soporte DevTools

A partir de Chrome 86, puede emular eventos inactivos en Chrome DevTools sin estar realmente inactivo. En DevTools, abra el Sensores pestaña y buscar Emular el estado del detector inactivo. Puede ver las diversas opciones en el video a continuación.

Soporte de titiritero

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

Manifestación

Puede ver la API de detección de inactividad en acción con el Demostración de Ephemeral Canvas que borra su contenido después de 60 segundos de inactividad. Podrías imaginar que esto se implementará en una tienda departamental para que los niños garabateen.

Polyfilling

Algunos aspectos de la API de detección de inactividad son bibliotecas de detección de inactividad y polivalentes como inactivo.ts existen, 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 necesita realizar un sondeo costoso de eventos de entrada o escuchar cambios de visibilidad. Sin embargo, de manera más restrictiva, las bibliotecas no pueden decir hoy cuando un usuario permanece inactivo fuera de su área de contenido (por ejemplo, cuando un usuario está en una pestaña diferente o cierra 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 Controlar el acceso a las potentes funciones de la plataforma web, incluido el control del usuario, la transparencia y la ergonomía. La capacidad de utilizar esta API está controlada por el
'idle-detection' permiso. Para utilizar la API, una aplicación también debe estar ejecutándose 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 API. 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.

Retroalimentación

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

Cuéntanos sobre el diseño de la API

¿Hay algo en la API que no funciona como esperabas? ¿O faltan métodos o propiedades que necesita para implementar su idea? ¿Tiene alguna pregunta o comentario sobre el modelo de seguridad? Presentar un problema de especificaciones en el correspondiente Repositorio de GitHubo agregue sus pensamientos a un problema 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? Presentar un error en new.crbug.com. Asegúrese de incluir todos los detalles que pueda, instrucciones simples para reproducir e ingrese Blink>Input en el Componentes caja.
Falla funciona muy bien para compartir repros rápidos y fáciles.

Mostrar apoyo a la API

¿Está pensando en utilizar la API de detección de inactividad? Su soporte público ayuda al equipo de Chrome a priorizar 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 la WICG
Enviar un tweet a @Cromodev con el #idledetection hashtag y háganos saber dónde y cómo lo está usando.

Enlaces Útiles

Agradecimientos

La API de detección de inactividad fue implementada por Sam Goto. El soporte de DevTools fue agregado por Maksim Sadym. Gracias a Joe Medley,
Kayce vascosy
Beca Reilly por sus reseñas de este artículo. La imagen del héroe es de Fernando Hernandez en
Unsplash.