Rilevare gli utenti inattivi con l'API Idle Detection

Utilizza l'API Rilevamento inattività per sapere quando l'utente non sta utilizzando attivamente il 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 tastiera, mouse, schermo, attivazione di un salvaschermo, blocco dello schermo, o lo spostamento su 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 possono utilizzare questa API:

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

Stato attuale

Passaggio Stato
1. Crea messaggio esplicativo Completato
2. Crea la bozza iniziale delle specifiche Completato
3. Raccogli feedback e esegui l'iterazione del design In corso
4. Prova dell'origine Completato
5. Lancio Chromium 94

Come utilizzare l'API Idle Detection

Rilevamento delle caratteristiche

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

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

Concetti sull'API Idle Detection

L'API Idle Detection presuppone che ci sia un certo livello di coinvolgimento tra l'utente, lo user agent (ossia il browser) e il sistema operativo del dispositivo in uso. ed è rappresentato in due dimensioni:

  • Lo stato di inattività dell'utente: active o idle: l'utente ha o non ha ha interagito con lo user agent per un certo 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 e l'interazione con lo user agent.

Distinguere active da idle richiede un'euristica che può variare in base a utente, user agent e il sistema operativo. Deve anche essere una soglia abbastanza approssimativa. (vedi Sicurezza e autorizzazioni).

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

Utilizzo dell'API Idle Detection

Per utilizzare l'API Idle Detection, occorre innanzitutto per assicurarti che venga concessa l'autorizzazione 'idle-detection'. Se l'autorizzazione non viene concessa, devi richiedilo 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 nell'creare un'istanza per IdleDetector. Il valore minimo di threshold è 60.000 millisecondi (1 minuto). Puoi finalmente avviare il rilevamento di inattività chiamando il metodo Metodo start() di IdleDetector. Prende un oggetto con il valore threshold inattivo 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 di inattività chiamando il metodo di AbortController abort() .

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

Assistenza per DevTools

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

Emulazione dello stato del rilevatore inattivo in DevTools.

Assistenza per burattini

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 temporanea di Canvas che ne elimina i contenuti dopo 60 secondi di inattività. Si potrebbe immaginare che il deployment venga eseguito in un reparto un negozio dove i bambini sfondono i loro scarabocchi.

Demo di Canvas temporaneo

Polyfill

Alcuni aspetti dell'API Idle Detection è la possibilità di eseguire il polyfill e librerie di rilevamento di 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 effettuare costoso sondaggio per gli eventi di input o ascoltare cambiamenti di visibilità. In modo più restrittivo, tuttavia, le librerie non possono rilevare oggi quando un utente diventa inattivo al di fuori dell'area dei suoi contenuti (ad es. quando un utente si trova in una scheda diversa o si sono scollegati del tutto dal computer).

Sicurezza e autorizzazioni

Il team di Chrome ha progettato e implementato l'API Idle Detection utilizzando i principi fondamentali definita in Controllo dell'accesso a potenti funzionalità della piattaforma web, tra cui controllo dell'utente, trasparenza ed ergonomia. La possibilità di utilizzare questa API è controllata 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 che utenti malintenzionati facciano un uso improprio delle nuove API. Siti web apparentemente indipendenti, ma che in realtà sono controllate dalla stessa entità, potrebbero ottenere informazioni relative all'inattività dell'utente e correlare i dati per identificare gli utenti unici tra origini. Per mitigare questo tipo di attacchi, L'API Idle Detection limita la granularità degli eventi di inattività segnalati.

Feedback

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

Parlaci della progettazione dell'API

C'è qualcosa nell'API che non funziona come previsto? Oppure mancano metodi o le proprietà necessarie per implementare la tua idea? Hai una domanda o un commento sul modello di sicurezza? Segnala un problema relativo alle specifiche sul repository GitHub corrispondente o aggiungi le tue opinioni a un problema esistente.

Segnalare 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. Includi il maggior numero di dettagli possibile, semplici istruzioni per la riproduzione e inserisci Blink>Input nella casella Componenti. Glitch è la soluzione perfetta per condividere riproduzioni in modo facile e veloce.

Mostra 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 indica agli altri fornitori di browser quanto sia fondamentale supportarli.

Link utili

Ringraziamenti

L'API Idle Detection è stata implementata da Sam Goto. Il supporto per DevTools è stato aggiunto da Maksim Sadym. Grazie a Joe Medley, Kayce Basques e Reilly Grant per le sue recensioni su questo articolo. L'immagine hero è di Fernando Hernandez su Rimuovi schermo.