Rilevare gli utenti inattivi con l'API Idle Detection

Utilizza l'API Idle Detection per sapere quando l'utente non sta utilizzando 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 e lo schermo, l'attivazione di un salvaschermo, il blocco dello schermo o lo spostamento su una schermata diversa. Una soglia definita dallo sviluppatore attiva la notifica.

Casi d'uso suggeriti per l'API Idle Detection

Esempi di siti che possono utilizzare questa API includono:

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

Stato attuale

Passaggio Stato
1. Crea messaggio esplicativo Completato
2. Crea una bozza iniziale della specifica Completato
3. Raccogli feedback e ottimizza il design In corso
4. Prova dell'origine Completato
5. Lancio Chromium 94

Come utilizzare l'API Idle Detection

Rilevamento delle 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 ci sia un certo livello di coinvolgimento tra utente, lo user agent (ossia il browser) e il sistema operativo del dispositivo in uso. È rappresentato in due dimensioni:

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

Per distinguere active da idle sono necessarie euristiche che possono variare in base a utente, user agent e sistema operativo. Inoltre, dovrebbe essere una soglia ragionevolmente approssimativa (vedi Sicurezza e autorizzazioni).

Il modello non fa intenzionalmente distinzione tra interazione con determinati contenuti (ovvero la pagina web di una scheda utilizzando l'API), user agent nel suo insieme o sistema operativo. Questa definizione è lasciata allo user agent.

Utilizzo dell'API Idle Detection

Il primo passaggio quando si usa l'API Idle Detection è verificare che venga concessa l'autorizzazione 'idle-detection'. Se l'autorizzazione non viene concessa, devi richiederla tramite IdleDetector.requestPermission(). Tieni presente che per chiamare questo metodo è necessario 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 nel creare un'istanza di IdleDetector. Il valore minimo di threshold è 60.000 millisecondi (1 minuto). Puoi finalmente avviare il rilevamento di inattività chiamando il metodo start() di IdleDetector. Richiede un oggetto con il valore threshold inattivo desiderato in millisecondi e un signal facoltativo con 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 di inattività chiamando il metodo abort() di AbortController.

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

Supporto DevTools

A partire da Chromium 94, puoi emulare eventi inattivi in DevTools senza essere effettivamente inattivo. In DevTools, apri la scheda Sensori e cerca Emula stato di inattività del rilevatore. Puoi vedere le varie opzioni nel video seguente.

Emulazione dello stato del rilevatore inattivo in DevTools.

Assistenza per Puppeteer

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

Demo

Puoi vedere l'API Idle Detection in azione con la demo di Canvas temporanea, che cancella i contenuti dopo 60 secondi di inattività. Potreste immaginare che venga implementato in un grande magazzino dove i bambini possono scarabocchiare.

Demo di Canvas temporaneo

Poliriempimento

Alcuni aspetti dell'API Idle Detection sono librerie di rilevamento polyfill e inattive, come idle.ts, che esistono, ma questi approcci sono limitati all'area dei contenuti dell'app web: la libreria in esecuzione nel contesto dell'app web deve eseguire costosi sondaggi sugli eventi di input o ascoltare i cambiamenti di visibilità. Tuttavia, in modo più restrittivo, le librerie non sono in grado di rilevare attualmente quando un utente rimane inattivo al di fuori dell'area dei contenuti (ad es. quando un utente si trova su una scheda diversa o si è disconnesso completamente dal computer).

Sicurezza e autorizzazioni

Il team di Chrome ha progettato e implementato l'API Idle Detection utilizzando i principi fondamentali definiti nella sezione Controllo dell'accesso alle funzionalità avanzate della piattaforma web, tra cui controllo degli utenti, trasparenza ed ergonomia. La possibilità di utilizzare questa API è controllata dall'autorizzazione 'idle-detection'. Per utilizzare l'API, un'app deve inoltre essere in esecuzione in un contesto sicuro di primo livello.

Controllo e privacy degli utenti

Vogliamo sempre impedire a 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 gli utenti unici tra le origini. Per attenuare questo tipo di attacchi, l'API Idle Detection limita la granularità degli eventi di inattività segnalati.

Feedback

Il team di Chrome vuole conoscere le tue esperienze con l'API Idle Detection.

Parlaci della progettazione 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 domande o commenti sul modello di sicurezza? Segnala un problema relativo alle specifiche nel repository GitHub corrispondente oppure aggiungi le tue opinioni su un problema esistente.

Segnala un problema con l'implementazione

Hai trovato un bug nell'implementazione di Chrome? Oppure l'implementazione è diversa dalle specifiche? Segnala un bug all'indirizzo new.crbug.com. Assicurati di includere il maggior numero di dettagli possibile e di istruzioni semplici per la riproduzione e inserisci Blink>Input nella casella Componenti. Glitch funziona benissimo per condividere riproduzioni rapide e semplici.

Mostra il supporto dell'API

Hai intenzione di utilizzare l'API Idle Detection? Il 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. Ringraziamo Joe Medley, Kayce Basques e Reilly Grant per le loro recensioni su questo articolo. L'immagine hero è di Fernando Hernandez su Unsplash.