Inaktive Nutzer mit der Idle Detection API erkennen

Mit der Idle Detection API können Sie feststellen, wann der 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, was z. B. auf mangelnde Interaktion mit Tastatur, Maus oder Bildschirm, Aktivierung eines Bildschirmschoners, Sperren des Bildschirms oder Wechseln zu einem anderen Bildschirm hinweist. Ein vom Entwickler definierter Schwellenwert löst die Benachrichtigung aus.

Empfohlene Anwendungsfälle für die Idle Detection API

Beispiele für Websites, die diese API möglicherweise verwenden:

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

Aktueller Status

Step	Status
1. Erklärende Erklärung 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 Idle Detection API unterstützt wird:

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

Konzepte der Idle Detection API

Die Idle Detection API geht davon aus, dass ein gewisses Maß an Interaktion zwischen dem Nutzer, dem User-Agent (d. h. dem Browser) und dem Betriebssystem des verwendeten Geräts besteht. Dies wird in zwei Dimensionen dargestellt:

• Inaktivstatus des Nutzers:active oder idle: Der Nutzer hat mit dem User-Agent über einen bestimmten Zeitraum interagiert oder nicht.
• Der Bildschirminaktivitätsstatus: locked oder unlocked: Das System hat eine aktive Displaysperre (z. B. einen Bildschirmschoner), die eine 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 er ein relativ grober Schwellenwert sein (siehe Sicherheit und Berechtigungen).

Das Modell unterscheidet bewusst nicht formell zwischen der Interaktion mit bestimmten Inhalten (d. h. einer Webseite in einem Tab, für die die API verwendet wird), dem User-Agent als Ganzes oder dem Betriebssystem. Diese Definition bleibt dem User-Agent überlassen.

Idle Detection API verwenden

Prüfen Sie bei Verwendung der Idle Detection API zuerst, ob die Berechtigung 'idle-detection' gewährt wurde. Wenn die Berechtigung nicht gewährt wird, müssen Sie sie über IdleDetector.requestPermission() anfordern. Zum Aufrufen 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.');
}

Hinweis:Anfangs war die Inaktivitätserkennung durch die Berechtigung für Benachrichtigungen gesteuert. Viele, aber nicht alle Anwendungsfälle dieser API beziehen sich auf Benachrichtigungen. Die Bearbeiter der Spezifikation für die Inaktivitätserkennung haben jedoch beschlossen, sie einer speziellen Berechtigung zur Erkennung von Inaktivität zuzuteilen.

Im zweiten Schritt wird dann IdleDetector instanziiert. Der Mindestwert für threshold beträgt 60.000 Millisekunden (1 Minute). Sie können die Inaktivitätserkennung schließlich starten, indem Sie die Methode start() des IdleDetector aufrufen. Ein Objekt mit der gewünschten inaktiven threshold in Millisekunden und einem optionalen signal mit AbortSignal wird verwendet, um die Inaktivitätserkennung als Parameter 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 Erkennung der Inaktivität durch Aufrufen der Methode abort() des AbortController abbrechen.

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

Unterstützung für Entwicklertools

Ab Chromium 94 können Sie inaktive Ereignisse in den Entwicklertools emulieren, ohne sich tatsächlich zu befinden. Öffnen Sie in den Entwicklertools den Tab Sensoren und suchen Sie Inaktivitätserkennungsstatus emulieren. Im Video unten sehen Sie die verschiedenen Optionen.

Emulation des inaktiven Detektorstatus in den Entwicklertools.

Puppeteer-Unterstützung

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

Demo

Sie können sich die Idle Detection API in Aktion in der Ephemeral Canvas-Demo ansehen, bei der der Inhalt nach 60 Sekunden Inaktivität gelöscht wird. Sie könnten sich dies in einem Kaufhaus vorstellen, in dem die Kinder etwas malen können.

Polyfilling

Einige Aspekte der Idle Detection API sind anpassbar. Es gibt auch Bibliotheken zur Erkennung von Inaktivität wie idle.ts. Diese Ansätze sind jedoch auf den eigenen Inhaltsbereich einer Webanwendung beschränkt: Die Bibliothek, die im Kontext der Webanwendung ausgeführt wird, muss kostspielig nach Eingabeereignissen oder Sichtbarkeitsänderungen suchen. Einschränkungen in den Bibliotheken können heute jedoch nicht erkennen, wenn ein Nutzer außerhalb seines Inhaltsbereichs inaktiv ist (z.B. wenn er sich auf einem anderen Tab befindet oder sich ganz von seinem Computer abgemeldet hat).

Sicherheit und Berechtigungen

Das Chrome-Team hat die Idle Detection API gemäß den unter Zugriff auf leistungsstarke Webplattform-Funktionen steuern definierten Grundprinzipien wie Nutzersteuerung, Transparenz und Ergonomie entwickelt und implementiert. Die Verwendung dieser API wird über die Berechtigung 'idle-detection' gesteuert. Um die API verwenden zu können, muss eine App außerdem in einem sicheren Kontext der obersten Ebene ausgeführt werden.

Nutzersteuerung und Datenschutz

Wir möchten verhindern, dass böswillige Akteure neue APIs missbrauchen. Scheinbar unabhängige Websites, die in Wirklichkeit von derselben Entität kontrolliert werden, können Informationen zu inaktiven Nutzern abrufen und diese Daten korrelieren, um einzelne Nutzer ursprungsübergreifend zu identifizieren. Um diese Art von Angriffen abzuschwächen, begrenzt die Idle Detection API den Detaillierungsgrad der gemeldeten Inaktivitätsereignisse.

Feedback

Das Chrome-Team möchte mehr über Ihre Erfahrungen mit der Idle Detection API hören.

Informationen zum API-Design

Gibt es etwas an der API, das nicht so funktioniert, wie Sie es erwartet hatten? Oder fehlen Methoden oder Eigenschaften, um Ihre Idee zu implementieren? Haben Sie eine Frage oder einen Kommentar zum Sicherheitsmodell? Sie können ein Spezifikationsproblem im entsprechenden GitHub-Repository melden oder Ihre Gedanken zu einem vorhandenen Problem hinzufügen.

Problem mit der Implementierung melden

Haben Sie einen Fehler bei der Implementierung in Chrome gefunden? Oder unterscheidet sich die Implementierung von der Spezifikation? Melden Sie einen Fehler unter new.crbug.com. Geben Sie so viele Details wie möglich und eine einfache Anleitung zum Reproduzieren an. Geben Sie Blink>Input in das Feld Komponenten ein. Glitch eignet sich perfekt, um schnelle und einfache Reproduzierungen zu teilen.

Unterstützung für die API zeigen

Möchten Sie die Idle Detection API verwenden? Ihre öffentliche Unterstützung hilft dem Chrome-Team, Funktionen zu priorisieren, und zeigt anderen Browseranbietern, wie wichtig es ist, sie zu unterstützen.

• Teile uns im WICG Discourse-Thread mit, wie du es verwenden möchtest.
• Sende einen Tweet mit dem Hashtag #IdleDetection an @ChromiumDev und teile uns mit, wo und wie du es verwendest.

Nützliche Links

• Öffentliche Erklärung
• Entwurf
• Demoquelle zur Idle Detection API | Demoquelle zur Idle Detection API
• Tracking-Fehler
• ChromeStatus.com-Eintrag
• Blink-Komponente: Blink>Input

Danksagungen

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