Deze pagina is vertaald door de Cloud Translation API.

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

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

Thomas Steiner

Wat is de Inactiviteitsdetectie-API?

De Idle Detection API waarschuwt ontwikkelaars wanneer een gebruiker inactief is en geeft bijvoorbeeld aan dat er geen interactie is met het toetsenbord, de muis, het scherm, het activeren van een screensaver, het vergrendelen van het scherm of het verplaatsen naar een ander scherm. Een door de ontwikkelaar gedefinieerde drempel activeert de melding.

Voorgestelde gebruiksscenario's voor de API voor inactieve detectie

Voorbeelden van sites die deze API kunnen gebruiken zijn:

Chatapplicaties of online sociale netwerksites kunnen deze API gebruiken om de gebruiker te laten weten of zijn contacten momenteel bereikbaar zijn.
Openbaar toegankelijke kiosk-apps, bijvoorbeeld in musea, kunnen deze API gebruiken om terug te keren naar de 'thuis'-weergave als niemand meer met de kiosk communiceert.
Apps die dure berekeningen vereisen, bijvoorbeeld om grafieken te tekenen, kunnen deze berekeningen beperken tot momenten waarop de gebruiker interactie heeft met zijn apparaat.

Huidige status

Stap	Toestand
1. Maak een uitleg	Compleet
2. Maak een eerste ontwerp van specificatie	Compleet
3. Verzamel feedback en herhaal het ontwerp	Bezig
4. Oorsprongsproces	Voltooid
5. Lancering	Chroom 94

Hoe u de Idle Detection-API gebruikt

Functiedetectie

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

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

API-concepten voor inactieve detectie

De Idle Detection API gaat ervan uit dat er een zekere mate van betrokkenheid bestaat 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 al een bepaalde periode wel of geen interactie gehad met de user-agent.
De inactieve status van het scherm: locked of unlocked : het systeem heeft een actieve schermvergrendeling (zoals een screensaver) die interactie met de user-agent verhindert.

Om onderscheid te maken tussen active en idle zijn heuristieken nodig die per gebruiker, user-agent en besturingssysteem kunnen verschillen. Het moet ook een redelijk grove drempel zijn (zie Beveiliging en machtigingen ).

Het model maakt opzettelijk geen formeel onderscheid tussen interactie met bepaalde inhoud (dat wil zeggen de webpagina op een tabblad die de API gebruikt), de user-agent als geheel of het besturingssysteem; deze definitie wordt overgelaten aan de user-agent.

Met behulp van de Idle Detection-API

De eerste stap bij het gebruik van de Idle Detection API is ervoor te zorgen dat de toestemming 'idle-detection' wordt verleend. Als de toestemming niet wordt 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 threshold is 60.000 milliseconden (1 minuut). U kunt eindelijk de detectie van inactiviteit starten door de methode start() van IdleDetector aan te roepen. Er is een object nodig met de gewenste threshold in milliseconden en een optioneel signal met een AbortSignal om de inactiviteitsdetectie als parameters af te breken.

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 afbreken door de methode abort() van AbortController aan te roepen.

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

DevTools-ondersteuning

Vanaf Chromium 94 kunt u inactieve gebeurtenissen in DevTools emuleren zonder daadwerkelijk inactief te zijn. Open in DevTools het tabblad Sensors en zoek naar de status Emulate Idle Detector (Inactieve detector emuleren) . In onderstaande video zie je de verschillende mogelijkheden.

Emulatie van de status van de inactieve detector in DevTools.

Ondersteuning van poppenspelers

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

Demo

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

Kortstondige Canvas-demo

Polyvulling

Sommige aspecten van de Idle Detection API zijn polyfillable en er bestaan bibliotheken voor inactieve detectie, zoals idle.ts , maar deze benaderingen zijn beperkt tot het eigen inhoudsgebied van een web-app: de bibliotheek die in de context van de web-app draait, moet duur peilen naar invoergebeurtenissen of luister naar veranderingen in de zichtbaarheid. Maar restrictiever is dat bibliotheken tegenwoordig niet kunnen zien wanneer een gebruiker inactief is buiten zijn inhoudsgebied (bijvoorbeeld wanneer een gebruiker zich op een ander tabblad bevindt of helemaal is uitgelogd op zijn computer).

Beveiliging en machtigingen

Het Chrome-team heeft de Idle Detection API ontworpen en geïmplementeerd met behulp van de kernprincipes die zijn gedefinieerd in Toegangscontrole tot krachtige webplatformfuncties , waaronder gebruikerscontrole, transparantie en ergonomie. De mogelijkheid om deze API te gebruiken wordt bepaald door de machtiging 'idle-detection' . Om de API te kunnen gebruiken, moet een app ook in een beveiligde context op het hoogste niveau draaien.

Gebruikerscontrole en privacy

We willen altijd voorkomen dat kwaadwillende actoren nieuwe API’s misbruiken. Ogenschijnlijk onafhankelijke websites, maar die in feite door dezelfde entiteit worden beheerd, kunnen inactieve informatie van gebruikers verkrijgen en de gegevens correleren om unieke gebruikers van verschillende oorsprongen 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 horen wat uw ervaringen zijn met de Idle Detection API.

Vertel ons over het API-ontwerp

Is 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? Heeft u een vraag of opmerking over het beveiligingsmodel? Dien een spec issue in op de corresponderende GitHub repository , of voeg uw gedachten toe aan een bestaand issue.

Meld een probleem met de implementatie

Heeft u een bug gevonden in de implementatie van Chrome? Of wijkt de uitvoering af van de specificaties? Dien een bug in op new.crbug.com . Zorg ervoor dat u zoveel mogelijk details en eenvoudige instructies voor reproductie opneemt, en typ Blink>Input in het vak Componenten . Glitch werkt uitstekend voor het delen van snelle en gemakkelijke reproducties.

Toon ondersteuning voor de API

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

Deel hoe u het wilt gebruiken in de WICG Discourse-thread .
Stuur een tweet naar @ChromiumDev met de hashtag #IdleDetection en laat ons weten waar en hoe je deze gebruikt.

Handige Links

Dankbetuigingen

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