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

Gebruik de Idle Detection API om te achterhalen wanneer de gebruiker zijn apparaat niet actief gebruikt.

Thomas Steiner

Wat is de Idle Detection API?

De Idle Detection API waarschuwt ontwikkelaars wanneer een gebruiker inactief is, bijvoorbeeld wanneer er geen interactie is met het toetsenbord, de muis of het scherm, een screensaver is geactiveerd, het scherm is vergrendeld of er naar een ander scherm is overgeschakeld. De melding wordt geactiveerd door een door de ontwikkelaar gedefinieerde drempelwaarde.

Voorgestelde gebruiksscenario's voor de Idle Detection API

Voorbeelden van sites die deze API kunnen gebruiken zijn:

  • Chattoepassingen of sociale netwerksites kunnen deze API gebruiken om de gebruiker te laten weten of zijn contactpersonen op dit moment bereikbaar zijn.
  • Publiek toegankelijke kiosk-apps, bijvoorbeeld in musea, kunnen deze API gebruiken om terug te keren naar de 'start'-weergave als niemand meer met de kiosk in aanraking komt.
  • Apps die dure berekeningen vereisen, bijvoorbeeld het tekenen van grafieken, kunnen deze berekeningen beperken tot momenten waarop de gebruiker met zijn apparaat bezig is.

Huidige status

Stap Status
1. Maak een uitleg Compleet
2. Maak een eerste ontwerp van de specificatie Compleet
3. Verzamel feedback en herhaal het ontwerp In uitvoering
4. Oorsprongsproef Voltooid
5. Lancering Chroom 94

Hoe de Idle Detection API te gebruiken

Feature detectie

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

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

API-concepten voor inactiviteitsdetectie

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

  • 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.

Om active van idle te onderscheiden, zijn heuristieken nodig die kunnen verschillen per gebruiker, user agent en besturingssysteem. Het moet ook 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 met behulp van de API), de gebruikersagent als geheel of het besturingssysteem. Deze definitie wordt aan de gebruikersagent overgelaten.

De Idle Detection API gebruiken

De eerste stap bij het gebruik van de Idle Detection API is ervoor te zorgen dat de machtiging 'idle-detection' is verleend. Als de machtiging niet is verleend, moet u deze aanvragen via IdleDetector.requestPermission() . Houd er rekening mee dat het aanroepen van deze methode een gebruikersgebaar 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 vervolgens het instantiëren van de IdleDetector . De minimale threshold is 60.000 milliseconden (1 minuut). U kunt de inactiviteitsdetectie ten slotte starten door de start() methode van de IdleDetector aan te roepen. Deze gebruikt een object met de gewenste threshold in milliseconden en een optioneel signal met een AbortSignal om de inactiviteitsdetectie af te breken als parameters.

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

U kunt de detectie van inactiviteit stoppen door de abort() methode van AbortController aan te roepen.

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

DevTools-ondersteuning

Vanaf Chromium 94 kun je inactiviteitsgebeurtenissen in DevTools emuleren zonder daadwerkelijk inactief te zijn. Open in DevTools het tabblad Sensoren en zoek naar Emulate Idle Detector state . Je kunt de verschillende opties bekijken in de onderstaande video.

Emulatie van de Idle Detector-status in DevTools.

Ondersteuning van poppenspelers

Vanaf Puppeteer versie 5.3.1 kunt u de verschillende inactieve toestanden emuleren om programmatisch te testen hoe het gedrag van uw web-app verandert.

Demonstratie

Je kunt de Idle Detection API in actie zien met de Ephemeral Canvas-demo , 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-demo

Polyfilling

Sommige aspecten van de Idle Detection API zijn polyfillable en er bestaan ​​bibliotheken voor inactiviteitsdetectie zoals idle.ts , maar deze benaderingen zijn beperkt tot het eigen contentgebied van een webapp: de bibliotheek die in de context van de webapp draait, moet op kostbare wijze peilen naar invoergebeurtenissen of luisteren naar veranderingen in zichtbaarheid. Beperkter is echter dat bibliotheken momenteel niet kunnen vaststellen wanneer een gebruiker inactief wordt buiten het contentgebied (bijvoorbeeld wanneer een gebruiker zich op een ander tabblad bevindt of helemaal is afgemeld van zijn computer).

Beveiliging en machtigingen

Het Chrome-team heeft de Idle Detection API ontworpen en geïmplementeerd op basis van de kernprincipes die zijn gedefinieerd in 'Toegang tot krachtige webplatformfuncties beheren' , 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 ook in een beveiligde context op het hoogste niveau worden uitgevoerd.

Gebruikerscontrole en privacy

We willen altijd voorkomen dat kwaadwillenden misbruik maken van nieuwe API's. Ogenschijnlijk onafhankelijke websites, die in feite door dezelfde entiteit worden beheerd, kunnen informatie over inactieve gebruikers verkrijgen en deze gegevens correleren om unieke gebruikers van verschillende bronnen te identificeren. Om dit soort aanvallen tegen te gaan, beperkt de Idle Detection API de granulariteit van de gerapporteerde inactieve gebeurtenissen.

Feedback

Het Chrome-team wil graag uw ervaringen met de Idle Detection API horen.

Vertel ons over het API-ontwerp

Werkt er iets aan de API dat niet werkt 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 spec-issue in op de betreffende GitHub-repository of voeg je mening 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 . Zorg ervoor dat je zoveel mogelijk details geeft, eenvoudige instructies voor het reproduceren en Blink>Input in het vak Componenten invoert.

Toon ondersteuning voor de API

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

Nuttige links

Dankbetuigingen

De Idle Detection API is geïmplementeerd door Sam Goto . DevTools-ondersteuning is toegevoegd door Maksim Sadym . Dank aan Joe Medley , Kayce Basques en Reilly Grant voor hun reviews van dit artikel. De hero-afbeelding is van Fernando Hernandez op Unsplash .