Detecteer inactieve gebruikers met de Idle Detection API,Detecteer inactieve gebruikers met de Idle Detection API

Thomas Steiner

Gepubliceerd: 18 mei 2020

Browser Support

  • Chrome: 94.
  • Rand: 114.
  • Firefox: niet ondersteund.
  • Safari: niet ondersteund.

Source

De Idle Detection API waarschuwt ontwikkelaars wanneer een gebruiker inactief is, bijvoorbeeld door geen interactie met het toetsenbord, de muis of het scherm, het activeren van een screensaver, het vergrendelen van het scherm of het overschakelen naar een ander scherm. Een door de ontwikkelaar gedefinieerde drempelwaarde activeert de melding.

Voorgestelde gebruiksscenario's voor de API voor detectie van inactiviteit

Voorbeelden van sites die deze API kunnen gebruiken zijn:

  • Chat-apps of online sociale netwerksites kunnen deze API gebruiken om de gebruiker te laten weten of zijn of haar contactpersonen bereikbaar zijn.
  • Openbaar toegankelijke kiosk-apps, bijvoorbeeld in musea, kunnen deze API gebruiken om terug te keren naar het startscherm als niemand meer met de kiosk interacteert.
  • Apps die veel rekenwerk vereisen, bijvoorbeeld om grafieken te tekenen, kunnen deze berekeningen beperken tot momenten waarop de gebruiker interactie heeft met zijn of haar apparaat.

Gebruik de API

Om te controleren of de Idle Detection API wordt ondersteund, gebruikt u:

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

API-concepten

De Idle Detection API gaat ervan uit dat er een zekere mate van interactie bestaat tussen de gebruiker, de user agent (oftewel de browser) en het besturingssysteem van het gebruikte apparaat. Deze interactie wordt in twee dimensies weergegeven:

  • De inactieve status van de gebruiker: active of idle : de gebruiker heeft gedurende een bepaalde periode wel of niet met de gebruikersagent gecommuniceerd.
  • De inactieve status van het scherm: locked of unlocked : het systeem heeft een actieve schermvergrendeling (zoals een screensaver) die interactie met de gebruikersagent verhindert.

Het onderscheiden active en idle vereist heuristieken die kunnen verschillen per gebruiker, gebruikersagent en besturingssysteem. Het moet bovendien een redelijk grove drempel zijn (zie Beveiliging en machtigingen ).

Het model maakt opzettelijk geen formeel onderscheid tussen interactie met specifieke inhoud (dat wil zeggen, de webpagina in een tabblad via de API), de gebruikersagent als geheel of het besturingssysteem; deze definitie wordt aan de gebruikersagent overgelaten.

Vraag toestemming aan en maak een instantie aan.

De eerste stap bij het gebruik van de Idle Detection API is ervoor te zorgen dat de 'idle-detection' toestemming is verleend. Als deze toestemming niet is verleend, moet u deze aanvragen met IdleDetector.requestPermission() . Houd er rekening mee dat het aanroepen van deze methode een gebruikersactie vereist.

// 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.');
}

De tweede stap is het instantieren van de IdleDetector . De minimale threshold is 60.000 milliseconden (1 minuut). U kunt de inactiviteitsdetectie starten door de start() methode van de IdleDetector aan te roepen. Deze methode neemt een object met de threshold in milliseconden en een optioneel signal met een AbortSignal als parameters om de inactiviteitsdetectie te stoppen.

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

Stop de stationaire detectie

Je kunt de inactiviteitsdetectie afbreken door de abort() methode van de AbortController aan te roepen.

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

DevTools-ondersteuning

Je kunt in DevTools inactiviteitsgebeurtenissen simuleren , zonder dat het apparaat daadwerkelijk inactief is. Open in DevTools het tabblad Sensoren en zoek naar 'Emulate Idle Detector state' . De verschillende opties worden in de video getoond.

Emulatie van de status van de inactieve detector in DevTools.

ondersteuning van de poppenspeler

Vanaf Puppeteer versie 5.3.1 kun je de verschillende inactieve toestanden emuleren om programmatisch te testen hoe het gedrag van je webapplicatie verandert.

Demo

Je kunt de Idle Detection API in actie zien met de demo Ephemeral Canvas , die de inhoud na 60 seconden inactiviteit wist. Je kunt je voorstellen dat dit in een warenhuis wordt gebruikt, zodat kinderen erop kunnen tekenen.

Ephemeral Canvas-demonstratie

Polyfill

Sommige aspecten van de Idle Detection API zijn polyfillbaar en er bestaan ​​bibliotheken voor inactiviteitsdetectie zoals idle.ts , maar deze benaderingen zijn beperkt tot het eigen contentgebied van een webapplicatie: de bibliotheek die in de context van de webapplicatie draait, moet op kostbare wijze inputgebeurtenissen controleren of luisteren naar zichtbaarheidswijzigingen. Nog beperkender is dat bibliotheken momenteel niet kunnen vaststellen wanneer een gebruiker inactief wordt buiten het contentgebied (bijvoorbeeld wanneer een gebruiker een ander tabblad heeft geopend of helemaal is uitgelogd).

Beveiliging en machtigingen

Het Chrome-team heeft de Idle Detection API ontworpen en geïmplementeerd op basis van de kernprincipes die zijn vastgelegd in Controlling Access to Powerful Web Platform Features , waaronder gebruikerscontrole, transparantie en ergonomie. De mogelijkheid om deze API te gebruiken wordt beheerd door de 'idle-detection' machtiging . Om de API te kunnen gebruiken, moet een app bovendien in een beveiligde context op het hoogste niveau draaien.

Gebruikerscontrole en privacy

We willen altijd voorkomen dat kwaadwillenden nieuwe API's misbruiken. Schijnbaar onafhankelijke websites, maar die in feite door dezelfde entiteit worden beheerd, kunnen informatie over inactiviteit van gebruikers verkrijgen en deze gegevens correleren om unieke gebruikers op verschillende websites te identificeren. Om dit soort aanvallen te beperken, beperkt de Idle Detection API de granulariteit van de gerapporteerde inactiviteitsgebeurtenissen.

Feedback

Werkt er iets aan de API niet zoals je had verwacht? Of ontbreken er methoden of eigenschappen die je nodig hebt om je idee te implementeren? Heb je een vraag of opmerking over het beveiligingsmodel? Dien een specificatie-issue in op de bijbehorende GitHub-repository , of voeg je gedachten toe aan een bestaand issue.

Meld een probleem met de implementatie.

Heb je een bug gevonden in de implementatie van Chrome? Of wijkt de implementatie af van de specificatie? Meld een bug op new.crbug.com . Vermeld zoveel mogelijk details, eenvoudige instructies voor het reproduceren van het probleem en voer Blink>Input in bij het veld Components .

Toon je steun voor de API

Ben je van plan de Idle Detection API te gebruiken? Jouw publieke steun helpt het Chrome-team bij het prioriteren van functies en laat andere browserleveranciers zien hoe belangrijk het is om deze te ondersteunen.

Handige links

Dankbetuigingen

De API voor het detecteren van inactiviteit is geïmplementeerd door Sam Goto . Ondersteuning voor DevTools is toegevoegd door Maksim Sadym . Met dank aan Joe Medley , Kayce Basques en Reilly Grant voor hun feedback.