Inaktive Nutzer mit der Idle Detection API erkennen

Sie können die Idle Detection API verwenden, um herauszufinden, wenn ein Nutzer sein Gerät nicht aktiv verwendet.

Thomas Steiner

Was ist die Idle Detection API?

Die Idle Detection API benachrichtigt Entwickler, wenn ein Nutzer inaktiv ist. Dies weist auf fehlende Interaktionen mit Tastatur, Maus oder Bildschirm, Aktivierung eines Bildschirmschoners, Sperren des Bildschirms oder Wechseln zu einem anderen Bildschirm hin. Die Benachrichtigung wird durch einen vom Entwickler definierten Grenzwert ausgelöst.

Anwendungsfälle für die Inaktivitätserkennungs-API

Beispiele für Websites, die diese API verwenden können:

  • Chat-Anwendungen oder Online-Soziale-Netzwerk-Websites können diese API verwenden, um Nutzer darüber zu informieren, ob ihre Kontakte derzeit erreichbar sind.
  • Öffentlich zugängliche Kiosk-Apps, z. B. in Museen, können diese API verwenden, um zur Startseite zurückzukehren, wenn niemand mehr mit dem Kiosk interagiert.
  • Apps, die aufwendige Berechnungen erfordern, z. B. zum Zeichnen von Diagrammen, können diese Berechnungen auf Momente beschränken, in denen der Nutzer mit seinem Gerät interagiert.

Aktueller Status

Schritt Status
1. Erläuternde Mitteilung erstellen Abschließen
2. Ersten Entwurf der Spezifikation erstellen Abschließen
3. Feedback einholen und Design iterieren In Bearbeitung
4. Ursprungstest Abgeschlossen
5. Launch Chromium 94

Idle Detection API verwenden

Funktionserkennung

So prüfen Sie, ob die API zur Inaktivitätserkennung unterstützt wird:

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

Konzepte der Idle Detection API

Die API zur Inaktivitätserkennung geht davon aus, dass eine gewisse Interaktion zwischen dem Nutzer, dem User-Agent (d. h. dem Browser) und dem Betriebssystem des verwendeten Geräts stattfindet. Dies wird in zwei Dimensionen dargestellt:

  • Inaktivitätsstatus des Nutzers: active oder idle: Der Nutzer hat seit einiger Zeit nicht mit dem User-Agent interagiert oder interagiert gerade nicht mit ihm.
  • Inaktiver Bildschirm:locked oder unlocked: Das System hat eine aktive Displaysperre (z. B. einen Bildschirmschoner), die eine Interaktion mit dem User-Agent verhindert.

Zum Unterscheiden von active von idle sind Heuristiken erforderlich, die sich je nach Nutzer, User-Agent und Betriebssystem unterscheiden können. Außerdem sollte es sich um einen relativ groben Grenzwert handeln (siehe Sicherheit und Berechtigungen).

Das Modell unterscheidet absichtlich nicht zwischen Interaktionen mit bestimmten Inhalten (d. h. der Webseite auf einem Tab, auf der die API verwendet wird), dem User-Agent als Ganzes oder dem Betriebssystem. Diese Definition bleibt dem User-Agent überlassen.

Idle Detection API verwenden

Der erste Schritt bei der Verwendung der Inaktivitätserkennungs-API besteht darin, dafür zu sorgen, dass die Berechtigung 'idle-detection' gewährt ist. Wenn die Berechtigung nicht erteilt wird, müssen Sie sie über IdleDetector.requestPermission() anfordern. Hinweis: Für den Aufruf dieser Methode ist eine Nutzergeste erforderlich.

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

Im zweiten Schritt wird dann die IdleDetector instanziiert. Der Mindestwert für threshold beträgt 60.000 Millisekunden (1 Minute). Sie können die Inaktivitätserkennung starten, indem Sie die Methode start() von IdleDetector aufrufen. Als Parameter werden ein Objekt mit der gewünschten Inaktivitätszeit threshold in Millisekunden und ein optionaler signal mit einer AbortSignal benötigt, um die Inaktivitätserkennung abzubrechen.

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

Sie können die Inaktivitätserkennung abbrechen, indem Sie die Methode abort() der Klasse AbortController aufrufen.

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

Unterstützung für Entwicklertools

Ab Chromium 94 können Sie Inaktivitätsereignisse in den DevTools emulieren, ohne tatsächlich inaktiv zu sein. Öffnen Sie in den Entwicklertools den Tab Sensoren und suchen Sie nach Status des inaktiven Detektors emulieren. Die verschiedenen Optionen sind im Video unten zu sehen.

Emulierung des Inaktivitätsstatus des Detektors in den DevTools.

Puppeteer-Unterstützung

Ab Puppeteer-Version 5.3.1 können Sie die verschiedenen Inaktivitätszustände emulieren, um programmatisch zu testen, wie sich das Verhalten Ihrer Webanwendung ändert.

Demo

In der Ephemeral Canvas-Demo, bei der die Inhalte nach 60 Sekunden Inaktivität gelöscht werden, können Sie die Idle Detection API in Aktion sehen. Sie könnten sich vorstellen, dass diese in einem Kaufhaus eingesetzt werden, damit Kinder darauf herumkritzeln können.

Ephemeral Canvas – Demo

Polyfilling

Einige Aspekte der Inaktivitätserkennungs-API können mithilfe von Polyfills implementiert werden und es gibt Inaktivitätserkennungsbibliotheken wie idle.ts. Diese Ansätze sind jedoch auf den Inhaltsbereich einer Webanwendung beschränkt: Die im Kontext der Webanwendung ausgeführte Bibliothek muss aufwendig nach Eingabeereignissen suchen oder auf Sichtbarkeitsänderungen achten. Restriktiver können Bibliotheken heute jedoch nicht erkennen, wenn ein Nutzer außerhalb seines Inhaltsbereichs inaktiv ist, z.B. wenn sich ein Nutzer auf einem anderen Tab befindet oder sich von seinem Computer abgemeldet hat.

Sicherheit und Berechtigungen

Das Chrome-Team hat die Idle Detection API anhand der in Controlling Access to Powerful Web Platform Features (Zugriff auf leistungsstarke Funktionen der Webplattform steuern) definierten Grundprinzipien entwickelt und implementiert, einschließlich Nutzersteuerung, Transparenz und Ergonomie. Die Verwendung dieser API wird durch die Berechtigung 'idle-detection' gesteuert. Damit die API verwendet werden kann, muss die Anwendung auch in einem sicheren Kontext auf oberster Ebene ausgeführt werden.

Nutzerkontrolle und Datenschutz

Wir möchten immer verhindern, dass böswillige Akteure neue APIs missbrauchen. Scheinbar unabhängige Websites, die tatsächlich von derselben Entität verwaltet werden, können Informationen zur Inaktivität von Nutzern abrufen und die Daten in Beziehung setzen, um einzelne Nutzer über verschiedene Quellen hinweg zu identifizieren. Um diese Art von Angriffen zu minimieren, beschränkt die Idle Detection API den Detaillierungsgrad der gemeldeten Inaktivitätsereignisse.

Feedback

Das Chrome-Team möchte mehr über Ihre Erfahrungen mit der Inaktivitätserkennungs-API erfahren.

Informationen zum API-Design

Funktioniert die API nicht wie erwartet? Oder fehlen Methoden oder Eigenschaften, die Sie für die Implementierung Ihrer Idee benötigen? Haben Sie Fragen oder Kommentare zum Sicherheitsmodell? Reichen Sie ein Spezifikationsproblem im entsprechenden GitHub-Repository ein oder fügen Sie Ihre Gedanken zu einem vorhandenen Problem hinzu.

Problem mit der Implementierung melden

Haben Sie einen Fehler in der Chrome-Implementierung gefunden? Oder unterscheidet sich die Implementierung von der Spezifikation? Melden Sie den Fehler unter new.crbug.com. Geben Sie dabei so viele Details wie möglich an, eine einfache Anleitung zur Reproduktion und geben Sie Blink>Input in das Feld Components ein. Glitch eignet sich hervorragend, um schnell und einfach Reproduktionen zu teilen.

Unterstützung für die API anzeigen

Beabsichtigen Sie, die API zur Inaktivitätserkennung zu verwenden? Ihre öffentliche Unterstützung hilft dem Chrome-Team, Funktionen zu priorisieren, und zeigt anderen Browseranbietern, wie wichtig es ist, sie zu unterstützen.

Nützliche Links

Danksagungen

Die Idle Detection API wurde von Sam Goto implementiert. Die Unterstützung für Entwicklertools wurde von Maksim Sadym hinzugefügt. Vielen Dank an Joe Medley, Kayce Basques und Reilly Grant für die Überprüfung dieses Artikels. Das Hero-Image stammt von Fernando Hernandez auf Unsplash.