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.

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. Ein vom Entwickler definierter Grenzwert löst die Benachrichtigung aus.

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. Es sollte auch ein relativ grober Schwellenwert sein (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

Wenn Sie die Idle Detection API verwenden, müssen Sie zuerst die Berechtigung 'idle-detection' gewähren. 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. Im Video unten siehst du die verschiedenen Optionen.

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

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 eine Frage oder einen Kommentar 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 weicht die Implementierung von der Spezifikation ab? 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 schnelle und einfache Reproduktionen zu teilen.

Unterstützung für die API anzeigen

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.

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.