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 Dinge wie fehlende Interaktion mit Tastatur, Maus, Bildschirm, Aktivierung eines Bildschirmschoners, Bildschirmsperre, oder zu einem anderen Bildschirm wechseln. Ein vom Entwickler definierter Grenzwert löst die Benachrichtigung aus.

Empfohlene Anwendungsfälle für die Idle Detection API

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

  • Chat-Anwendungen oder Online-Social Networking-Websites können diese API verwenden, um dem Nutzer mitzuteilen, ob ihre Kontakte derzeit erreichbar sind.
  • Öffentlich zugängliche Kiosk-Apps, z. B. in Museen, können mit dieser API zur „Startseite“ zurückkehren wenn niemand mehr mit dem Kiosk interagiert.
  • Apps, die teure Berechnungen erfordern, z. B. für das Zeichnen von Diagrammen, können diese Berechnungen auf den Moment beschränken, in dem der Nutzer mit seinem Gerät interagiert.

Aktueller Status

Schritt Status
1. Erklärende 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

So verwenden Sie die Idle Detection API

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, den User-Agent (d. h. Browser) und das Betriebssystem des Geräts. Dies wird in zwei Dimensionen dargestellt:

  • Inaktiver Status des Nutzers: active oder idle: der Nutzer hat oder hat nicht hat über einen gewissen Zeitraum mit dem User-Agent interagiert.
  • Inaktiver Bildschirm: locked oder unlocked: Das System hat eine aktive Displaysperre (z. B. ein Bildschirmschoner), die verhindert, dass Interaktion mit dem User-Agent.

Um active von idle zu unterscheiden, sind Heuristiken erforderlich, die je nach Nutzer, User-Agent, und Betriebssystem. Es sollte auch ein relativ grober Grenzwert sein. (siehe Sicherheit und Berechtigungen).

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

Idle Detection API verwenden

Wenn Sie die Idle Detection API verwenden, um sicherzustellen, dass die Berechtigung 'idle-detection' gewährt wird. Wenn die Berechtigung nicht gewährt wird, müssen Sie Folgendes tun: über IdleDetector.requestPermission() anfordern. Beachte, dass zum Aufrufen dieser Methode eine Nutzergeste erforderlich ist.

// 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 IdleDetector instanziiert. Der Mindestwert für threshold beträgt 60.000 Millisekunden (1 Minute). Sie können endlich die Inaktivitätserkennung starten, indem Sie die Methode Die Methode start() von IdleDetector. Es benötigt ein Objekt mit dem gewünschten inaktiven threshold in Millisekunden und einen optionalen signal mit einem AbortSignal , 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 Inaktivitätserkennung abbrechen, indem Sie die AbortControllers abort() .

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 tatsächlich inaktiv zu sein. Öffnen Sie in den Entwicklertools den Tab Sensoren und suchen Sie nach Status des inaktiven Detektors emulieren. Im Video unten siehst du die verschiedenen Optionen.

<ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">
</ph> Emulation des inaktiven Status des Detektors in den Entwicklertools.

Puppeteer-Support

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 die Idle Detection API in der Demo für flüchtigen Canvas in Aktion sehen, bei der die nach 60 Sekunden Inaktivität zu laden. Sie können sich vorstellen, den Einsatz in einer Abteilung in dem Kinder malen können.

Sitzungsspezifisches Canvas-Demo

Polyfilling

Einige Aspekte der Idle Detection API sind polyausfüllbar und Bibliotheken zur Erkennung von Inaktivität wie idle.ts existieren, Diese Ansätze sind jedoch auf den eigenen Inhaltsbereich einer Web-App beschränkt: Die Bibliothek, die im Kontext der Webanwendung ausgeführt wird muss kostspielig Eingabeereignisse abfragen oder Sichtbarkeitsänderungen überwachen. Mit restriktiveren Einschränkungen können Bibliotheken heute jedoch nicht erkennen, wenn ein Nutzer inaktiv ist. außerhalb des Inhaltsbereichs liegen, z.B. wenn sich ein Nutzer auf einem anderen Tab oder sich ganz vom Computer abgemeldet haben).

Sicherheit und Berechtigungen

Das Chrome-Team hat die Idle Detection API nach den Grundprinzipien entwickelt und implementiert. wie unter Zugriff auf leistungsstarke Webplattform-Funktionen steuern beschrieben, einschließlich Nutzersteuerung, Transparenz und Ergonomie. Die Möglichkeit, diese API zu verwenden, wird vom 'idle-detection'-Berechtigung. Zur Verwendung der API muss eine App auch in einer Sicheren Kontext auf oberster Ebene.

Nutzersteuerung und Datenschutz

Wir möchten verhindern, dass böswillige Akteure neue APIs missbrauchen. Scheinbar unabhängige Websites die aber von derselben Entität kontrolliert werden, Informationen zu inaktiven Nutzern erhalten und die Daten korrelieren, um einzelne Nutzer über verschiedene Ursprünge hinweg zu identifizieren. Um diese Art von Angriffen abzuwehren, 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 erfahren.

Informationen zum API-Design

Funktioniert die API nicht wie erwartet? Oder fehlen Methoden, oder Eigenschaften, die Sie für die Umsetzung Ihrer Idee benötigen? Haben Sie eine Frage oder einen Kommentar 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 bei der Implementierung von Chrome einen Fehler gefunden? Oder weicht die Implementierung von der Spezifikation ab? Melde einen Fehler unter new.crbug.com. Geben Sie so viele Details wie möglich an, Anweisungen zum Reproduzieren und gib Blink>Input in das Feld Komponenten 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 priorisieren und anderen Browseranbietern zeigen, wie wichtig es für ihre Unterstützung ist.

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. Dank Joe Medley Kayce Basques und Reilly Grant für ihre Rezensionen zu diesem Artikel. Das Hero-Image stammt von Fernando Hernandez auf der Unsplash (Unsplash).