Rilevare gli utenti inattivi con l'API Idle Detection

Thomas Steiner

Pubblicato: 18 maggio 2020

Browser Support

  • Chrome: 94.
  • Edge: 114.
  • Firefox: not supported.
  • Safari: not supported.

Source

L'API Idle Detection avvisa gli sviluppatori quando un utente è inattivo, indicando ad esempio la mancanza di interazione con tastiera, mouse, schermo, l'attivazione di un salvaschermo, il blocco dello schermo o il passaggio a un'altra schermata. La notifica viene attivata da una soglia definita dallo sviluppatore.

Casi d'uso suggeriti per l'API Idle Detection

Ecco alcuni esempi di siti che potrebbero utilizzare questa API:

  • Le applicazioni di chat o i siti di social networking online possono utilizzare questa API per comunicare all'utente se i suoi contatti sono raggiungibili.
  • Le app kiosk esposte pubblicamente, ad esempio nei musei, possono utilizzare questa API per tornare alla visualizzazione "Home" se nessuno interagisce più con il kiosk.
  • Le app che richiedono calcoli costosi, ad esempio per disegnare grafici, possono limitare questi calcoli ai momenti in cui l'utente interagisce con il dispositivo.

Utilizzare l'API

Per verificare se l'API Idle Detection è supportata, utilizza:

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

Concetti API

L'API Idle Detection presuppone un certo livello di interazione tra l'utente, l'user agent (ovvero il browser) e il sistema operativo del dispositivo in uso. Questo è rappresentato in due dimensioni:

  • Lo stato di inattività dell'utente:active o idle: l'utente ha interagito o meno con lo user agent per un determinato periodo di tempo.
  • Stato di inattività dello schermo: locked o unlocked: il sistema ha un blocco schermo attivo (come un salvaschermo) che impedisce l'interazione con lo user agent.

La distinzione tra active e idle richiede euristiche che possono variare in base all'utente, allo user agent e al sistema operativo. Inoltre, deve essere una soglia ragionevolmente grossolana (vedi Sicurezza e autorizzazioni).

Il modello non distingue intenzionalmente in modo formale tra l'interazione con contenuti particolari (ovvero la pagina web in una scheda che utilizza l'API), lo user agent nel suo complesso o il sistema operativo; questa definizione è lasciata allo user agent.

Richiedi autorizzazioni e crea un'istanza

Il primo passaggio per utilizzare l'API Idle Detection è assicurarsi che sia concessa l'autorizzazione 'idle-detection'. Se l'autorizzazione non viene concessa, devi richiederla con IdleDetector.requestPermission(). Tieni presente che la chiamata di questo metodo richiede un'attivazione da parte dell'utente.

// 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.');
}

Il secondo passaggio consiste nell'istanziamento di IdleDetector. Il valore minimo di threshold è 60.000 millisecondi (1 minuto). Puoi finalmente avviare il rilevamento dell'inattività chiamando il metodo start() di IdleDetector. Accetta come parametri un oggetto con il valore di inattività threshold in millisecondi e un valore signal facoltativo con un valore AbortSignal per interrompere il rilevamento dell'inattività.

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);
}

Interrompere il rilevamento dell'inattività

Puoi interrompere il rilevamento dell'inattività chiamando il metodo AbortController abort().

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

Supporto di DevTools

Puoi emulare gli eventi di inattività in DevTools, senza che si verifichi effettivamente l'inattività. In DevTools, apri la scheda Sensori e cerca Simula stato di Idle Detector. Puoi vedere le varie opzioni nel video.

Simulazione dello stato di Idle Detector in DevTools.

Supporto di Puppeteer

A partire dalla versione 5.3.1 di Puppeteer, puoi emulare i vari stati di inattività per testare a livello di programmazione come cambia il comportamento della tua app web.

Demo

Puoi vedere l'API Idle Detection in azione con la demo di Ephemeral Canvas, che cancella i contenuti dopo 60 secondi di inattività. Puoi immaginare di utilizzarlo in un grande magazzino per farci scarabocchiare i bambini.

Demo di Ephemeral Canvas

Polyfill

Alcuni aspetti dell'API Idle Detection sono polyfillable e esistono librerie di rilevamento dell'inattività come idle.ts, ma questi approcci sono limitati all'area dei contenuti di un'app web: la libreria in esecuzione nel contesto dell'app web deve eseguire il polling in modo dispendioso per gli eventi di input o ascoltare le modifiche alla visibilità. In modo più restrittivo, però, le librerie non possono sapere quando un utente diventa inattivo al di fuori della propria area di contenuti (ad es. quando un utente si trova in un'altra scheda o ha eseguito completamente la disconnessione dal computer).

Sicurezza e autorizzazioni

Il team di Chrome ha progettato e implementato l'API Idle Detection utilizzando i principi fondamentali definiti in Controlling Access to Powerful Web Platform Features, tra cui controllo utente, trasparenza ed ergonomia. La possibilità di utilizzare questa API è controllata dall'autorizzazione 'idle-detection'. Per utilizzare l'API, un'app deve essere eseguita anche in un contesto sicuro di primo livello.

Controllo e privacy degli utenti

Vogliamo sempre impedire ai malintenzionati di utilizzare in modo improprio le nuove API. Siti web apparentemente indipendenti, ma che in realtà sono controllati dalla stessa entità, potrebbero ottenere informazioni sull'inattività degli utenti e correlare i dati per identificare utenti unici tra le origini. Per mitigare questi tipi di attacchi, l'API Idle Detection limita la granularità degli eventi di inattività segnalati.

Feedback

C'è qualcosa nell'API che non funziona come previsto? Oppure mancano metodi o proprietà che ti servono per implementare la tua idea? Hai una domanda o un commento sul modello di sicurezza? Invia una segnalazione relativa alle specifiche nel repository GitHub corrispondente o aggiungi i tuoi commenti a una segnalazione esistente.

Segnalare un problema relativo all'implementazione

Hai trovato un bug nell'implementazione di Chrome? O l'implementazione è diversa dalla specifica? Segnala un bug all'indirizzo new.crbug.com. Assicurati di includere il maggior numero di dettagli possibile, istruzioni semplici per la riproduzione e inserisci Blink>Input nella casella Componenti.

Mostrare il supporto per l'API

Intendi utilizzare l'API Idle Detection? Il tuo supporto pubblico aiuta il team di Chrome a dare la priorità alle funzionalità e mostra ad altri fornitori di browser quanto sia fondamentale supportarle.

Link utili

Ringraziamenti

L'API Idle Detection è stata implementata da Sam Goto. Il supporto di DevTools è stato aggiunto da Maksim Sadym. Grazie a Joe Medley, Kayce Basques e Reilly Grant per le loro recensioni.