Rilevare gli utenti inattivi con l'API Idle Detection

Utilizza l'API Idle Detection per scoprire quando l'utente non utilizza attivamente il proprio dispositivo.

Thomas Steiner

Che cos'è l'API Idle Detection?

L'API Idle Detection avvisa gli sviluppatori quando un utente è inattivo, indicando ad esempio la mancanza di interazione con la tastiera, il mouse, lo schermo, l'attivazione di un salvaschermo, il blocco dello schermo o il passaggio a una schermata diversa. 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 network online possono utilizzare questa API per comunicare all'utente se i suoi contatti sono attualmente 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 creare grafici, possono limitare questi calcoli ai momenti in cui l'utente interagisce con il dispositivo.

Stato attuale

Passaggio Stato
1. Creare un video esplicativo Completato
2. Creare una bozza iniziale della specifica Completato
3. Raccogli feedback e esegui l'iterazione sul design In corso
4. Prova dell'origine Completato
5. Lancio Chromium 94

Come utilizzare l'API Idle Detection

Rilevamento di funzionalità

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

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

Concetti dell'API Idle Detection

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

  • Stato inattivo dell'utente: active o idle: l'utente ha o meno interagito 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 (ad esempio un salvaschermo) che impedisce l'interazione con l'agente utente.

Distinguere active da idle richiede procedure di euristica che possono variare in base all'utente, all'agente utente e al sistema operativo. Inoltre, deve essere una soglia ragionevolmente approssimativa (consulta Sicurezza e autorizzazioni).

Il modello non distingue intenzionalmente formalmente tra l'interazione con determinati contenuti (ovvero la pagina web in una scheda che utilizza l'API), l'agente utente nel suo complesso o il sistema operativo; questa definizione è lasciata all'agente utente.

Utilizzo dell'API Idle Detection

Il primo passaggio per utilizzare l'API Idle Detection è verificare che l'autorizzazione 'idle-detection' sia stata concessa. Se l'autorizzazione non è stata concessa, devi richiederla tramite IdleDetector.requestPermission(). Tieni presente che l'attivazione di questo metodo richiede un gesto 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'inizializzare IdleDetector. Il valore minimo di threshold è 60.000 millisecondi (1 minuto). Infine, puoi avviare il rilevamento di inattività chiamando il metodo start() di IdleDetector. Richiede un oggetto con il tempo di inattività threshold desiderato in millisecondi e un signal facoltativo con un AbortSignal per interrompere il rilevamento di inattività come parametri.

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

Puoi interrompere il rilevamento inattivo chiamando il metodo abort() di AbortController.

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

Supporto di DevTools

A partire da Chromium 94, puoi emulare gli eventi inattivi in DevTools senza essere effettivamente inattivo. In DevTools, apri la scheda Sensori e cerca Simula stato di Idle Detector. Puoi vedere le varie opzioni nel video qui sotto.

Emulazione dello stato di Idle Detector in DevTools.

Supporto di Puppeteer

A partire dalla versione 5.3.1 di Puppeteer, puoi emulare i vari stati inattivi per testare in modo programmatico le variazioni del comportamento della tua app web.

Demo

Puoi vedere l'API Idle Detection in azione con la demo della tela effimera che cancella i contenuti dopo 60 secondi di inattività. Potresti immaginare di implementarlo in un centro commerciale per far divertire i bambini.

Demo di Canvas temporaneo

Polyfilling

Alcuni aspetti dell'API Idle Detection sono polyfillabili 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 un costoso polling per rilevare gli eventi di input o ascoltare le modifiche della visibilità. In modo più restrittivo, però, al momento le biblioteche non possono dire quando un utente è inattivo al di fuori della propria area di contenuti (ad esempio, quando un utente è in un'altra scheda o ha eseguito 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 Controllo dell'accesso a funzionalità potenti della piattaforma web, tra cui il controllo dell'utente, la trasparenza e l'ergonomia. La possibilità di utilizzare questa API è controllata dall'autorizzazione 'idle-detection'. Per utilizzare l'API, un'app deve anche essere in esecuzione in un contesto sicuro di primo livello.

Controllo dell'utente e privacy

Vogliamo sempre impedire a malintenzionati di utilizzare in modo improprio le nuove API. Siti web apparentemente indipendenti, ma in realtà controllati dalla stessa entità, potrebbero ottenere informazioni sull'inattività dell'utente e correlare i dati per identificare utenti unici in più origini. Per mitigare questo tipo di attacchi, l'API Idle Detection limita la granularità degli eventi inattivi segnalati.

Feedback

Il team di Chrome vuole conoscere la tua esperienza con l'API Idle Detection.

Fornisci informazioni sul design dell'API

C'è qualcosa nell'API che non funziona come previsto? Oppure mancano metodi o proprietà di cui hai bisogno 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 il tuo parere a una segnalazione esistente.

Segnalare un problema con l'implementazione

Hai trovato un bug nell'implementazione di Chrome? Oppure 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. Glitch è ideale per condividere riproduzioni rapide e semplici.

Mostra il supporto per l'API

Hai intenzione di 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 aver esaminato questo articolo. L'immagine hero è di Fernando Hernandez su Unsplash.