Utilizza l'API Rilevamento inattività per sapere quando l'utente non sta utilizzando attivamente il 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 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 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 per utilizzare l'API Idle Detection è verificare che l'autorizzazione 'idle-detection'
sia 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.');
Assistenza 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.
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.
Polyfilling
Alcuni aspetti dell'API Idle Detection sono costituiti da librerie di rilevamento polyfill e inattivo come idle.ts, ma questi approcci sono limitati all'area di contenuti propria di un'app web: La libreria in esecuzione nel contesto dell'app web deve eseguire costoso sondaggio per gli eventi di input o ascoltare cambiamenti di 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 di inattività 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 condividi la tua opinione su 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
Intendi utilizzare l'API Idle Detection? Il supporto pubblico aiuta il team di Chrome a dare la priorità alle funzionalità e mostra agli 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
- Specifiche in bozza
- Demo dell'API Idle Detection | Origine della demo dell'API Idle Detection
- Bug di monitoraggio
- Voce di ChromeStatus.com
- Componente Blink:
Blink>Input
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 aver esaminato questo articolo. L'immagine hero è di Fernando Hernandez su Unsplash.