Inaktive Nutzer mit der Idle Detection API erkennen

Mit der API zur Inaktivitätserkennung können Sie herausfinden, wann der Nutzer sein Gerät nicht aktiv nutzt.

Thomas Steiner

Was ist die Idle Detection API?

Die API zur Inaktivitätserkennung benachrichtigt Entwickler, wenn ein Nutzer inaktiv ist. Dies kann beispielsweise durch fehlende Interaktionen mit der Tastatur, der Maus oder dem Bildschirm, durch die Aktivierung eines Bildschirmschoners, das Sperren des Bildschirms oder das Wechseln zu einem anderen Bildschirm geschehen. 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 Startansicht 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.
  • Inaktivitätsstatus des Bildschirms:locked oder unlocked: Das System hat eine aktive Bildschirmsperre (z. B. einen Bildschirmschoner), die die Interaktion mit dem User-Agent verhindert.

Um active von idle zu unterscheiden, 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).

Im Modell wird bewusst nicht formal zwischen der Interaktion mit bestimmten Inhalten (d. h. der Webseite in einem Tab, der die API verwendet), dem User-Agent als Ganzem oder dem Betriebssystem unterschieden. Diese Definition wird 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 Zustand des inaktiven Detektors emulieren. Die verschiedenen Optionen sind im Video unten zu sehen.

Emulierung des Inaktivitätsstatus des Detektors in den Entwicklertools.

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 Demo für sitzungsspezifische Canvas wird die Inaktivitätserkennungs-API verwendet. Der Inhalt wird nach 60 Sekunden Inaktivität gelöscht. Sie könnten sich vorstellen, dass diese in einem Kaufhaus eingesetzt werden, damit Kinder darauf herumkritzeln können.

Demo für sitzungsspezifische Canvas

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. Bibliotheken können jedoch nicht feststellen, wenn ein Nutzer außerhalb des Inhaltsbereichs inaktiv wird, z.B. wenn er sich auf einem anderen Tab befindet oder vollständig von seinem Computer abgemeldet ist.

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 eine App außerdem in einem sicheren Kontext der obersten Ebene ausgeführt werden.

Nutzereinstellungen 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 korrelieren, um einzelne Nutzer über verschiedene Quellen hinweg zu identifizieren. Um diese Art von Angriffen zu vermeiden, schränkt die API für die Inaktivitätserkennung die Detailgenauigkeit der gemeldeten Inaktivitätsereignisse ein.

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 zur Implementierung Ihrer Idee benötigen? Haben Sie Fragen oder Kommentare zum Sicherheitsmodell? Reichen Sie ein Problem mit der Spezifikation im entsprechenden GitHub-Repository ein oder kommentieren Sie ein vorhandenes Problem.

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.