Utilizza l'API Idle Detection per scoprire quando l'utente non utilizza attivamente il proprio dispositivo.
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'animazione esplicativa | Completato |
2. Crea la bozza iniziale delle specifiche | Completato |
3. Raccogli feedback e ottimizza la progettazione | 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:
- Lo stato di inattività dell'utente:
active
oidle
. L'utente ha o non ha interagito con lo user agent per un determinato periodo di tempo. - Stato di inattività dello schermo:
locked
ounlocked
: 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 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 quando si utilizza l'API Rilevamento inattività consiste nell'assicurarsi che venga concessa l'autorizzazione 'idle-detection'
.
Se l'autorizzazione non viene concessa, dovrai
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.');
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 Simula stato di Idle Detector. Puoi vedere le varie opzioni nel seguente video.
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à. Si potrebbe immaginare che venga distribuito in un grande magazzino dove i bambini possono disegnare.
Riempimento
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à. Tuttavia, in modo più restrittivo, 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 e privacy degli utenti
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.
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 una domanda o un commento sul modello di sicurezza? Invia 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 dalla specifica?
Segnala un bug all'indirizzo new.crbug.com. Assicurati di includere 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
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.
- Spiega come intendi utilizzarlo nel thread del discorso di WicG.
- Invia un tweet all'indirizzo @ChromiumDev utilizzando l'hashtag
#IdleDetection
e facci sapere dove e come lo utilizzi.
Link utili
- Spiegazione pubblica
- Bozza della specifica
- Demo dell'API Idle Detection | Origine della demo dell'API Idle Detection
- Monitoraggio del bug
- Voce ChromeStatus.com
- Componente lampeggiante:
Blink>Input
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.