Erkennen Sie inaktive Benutzer mit der Inaktivitätserkennungs-API

Verwenden Sie die Leerlauferkennungs-API, um herauszufinden, wenn der Benutzer sein Gerät nicht aktiv verwendet.

18. Mai 2020
Aktualisiert 2. Oktober 2020

Was ist die Leerlauferkennungs-API?

Die Leerlauferkennungs-API benachrichtigt Entwickler, wenn ein Benutzer inaktiv ist, und weist beispielsweise auf mangelnde Interaktion mit Tastatur, Maus, Bildschirm, Aktivierung eines Bildschirmschoners, Bildschirmsperre oder Umschalten auf einen anderen Bildschirm hin. Ein vom Entwickler definierter Schwellenwert löst die Benachrichtigung aus.

Vorgeschlagene Anwendungsfälle für die Leerlauferkennungs-API

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

• Chat-Anwendungen oder Online-Websites für soziale Netzwerke können diese API verwenden, um den Benutzer darüber zu informieren, ob ihre Kontakte derzeit verfügbar sind.
• Öffentlich angezeigte Kioskanwendungen, beispielsweise in Museen, können diese API verwenden, um zur Ansicht "Home" zurückzukehren, wenn niemand mehr mit dem Kiosk interagiert.
• Anwendungen, die teure Berechnungen erfordern, beispielsweise zum Zeichnen von Grafiken, können diese Berechnungen auf Zeiten beschränken, in denen der Benutzer mit seinem Gerät interagiert.

Tatsächlicher Zustand

Verwendung der Leerlauferkennungs-API

Aktivierung über chrome: // flags

Aktivieren Sie die Option, um lokal mit der Leerlauferkennungs-API ohne Quelltest-Token zu experimentieren
#enable-experimentelle-Web-Plattform-Funktionen Flagge an chrome://flags.

Unterstützung während der Phase des Ursprungsnachweises aktivieren

Ab Chrome 84 steht die Idle Detection API als Ursprungsnachweis zur Verfügung. Der Ursprungsnachweis wird voraussichtlich auf Chrome 86 abgeschlossen sein.

Mit Origin-Tests können Sie neue Funktionen testen und der Community für Webstandards Feedback zu deren Benutzerfreundlichkeit, Praktikabilität und Effektivität geben. Weitere Informationen finden Sie in der Origin-Testhandbuch für Webentwickler. Um sich für diesen oder einen anderen Herkunftsnachweis anzumelden, besuchen Sie die Registrierungsseite.

Registrieren Sie sich für den Herkunftsnachweis

1. Fordern Sie einen Token an von Ihrer Herkunft.
2. Fügen Sie das Token Ihren Seiten hinzu. Es gibt zwei Möglichkeiten, dies zu tun:
   • Füge hinzu ein Ursprungsversuch Tag zum Header jeder Seite. Dies könnte beispielsweise folgendermaßen aussehen:
     
   • Wenn Sie Ihren Server konfigurieren können, können Sie das Token auch mit a hinzufügen Origin-Trial HTTP-Header. Der resultierende Antwortheader sollte folgendermaßen aussehen:
     Origin-Trial: TOKEN_GOES_HERE

Funktionserkennung

Verwenden Sie Folgendes, um zu überprüfen, ob die Leerlauferkennungs-API unterstützt wird:

wenn ('IdleDetector' im Fenster) {
}

API-Konzepte für die Leerlauferkennung

Die Leerlauferkennungs-API setzt voraus, dass zwischen dem Benutzer, dem Benutzeragenten (dh dem Browser) und dem Betriebssystem des verwendeten Geräts eine gewisse Interaktion besteht. Dies wird in zwei Dimensionen dargestellt:

• Der Ruhezustand des Benutzers:
  aktiv oder im Leerlauf- Der Benutzer hat über einen bestimmten Zeitraum mit dem Benutzeragenten interagiert oder nicht.
• Der Ruhezustand des Bildschirms:
  gesperrt oder freigeschaltet- Das System verfügt über eine aktive Bildschirmsperre (z. B. einen Bildschirmschoner), die die Interaktion mit dem Benutzeragenten verhindert.

Unterscheidungskraft aktiv schon seit im Leerlauf erfordert Heuristiken, die je nach Benutzer, Benutzeragent und Betriebssystem unterschiedlich sein können. Es sollte auch ein ziemlich grober Schwellenwert sein (siehe Sicherheit und Berechtigungen).

Das Modell unterscheidet absichtlich nicht formal zwischen der Interaktion mit bestimmten Inhalten (dh der Webseite in einem Tab unter Verwendung der API), dem Benutzeragenten als Ganzes oder dem Betriebssystem. Diese Definition bleibt dem Benutzeragenten überlassen.

Verwenden der Leerlauferkennungs-API

Der erste Schritt bei der Verwendung der Leerlauferkennungs-API besteht darin, dies sicherzustellen "Leerlauferkennung" Erlaubnis wird erteilt. Wenn keine Erlaubnis erteilt wird, müssen Sie diese anfordern IdleDetector.requestPermission (). Beachten Sie, dass für das Aufrufen dieser Methode eine Benutzergeste erforderlich ist.

const state = await IdleDetector.requestPermission();
if (state !== 'granted') {
return console.log('Idle detection permission not granted.');
}

Der zweite Schritt besteht dann darin, das zu instanziieren IdleDetector. Das Minimum Schwelle beträgt 60.000 Millisekunden (1 Minute). Sie können die inaktive Erkennung schließlich durch Aufrufen starten
IdleDetectorist Start () Methode. Nehmen Sie ein Objekt mit dem gewünschten Leerlauf Schwelle in Millisekunden und optional Signal mit einer
AbortSignal

inaktive Erkennung 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}.`);
});
erwarten idleDetector.Start({
Schwelle: 60000,
Signal,
});
console.Log('IdleDetector is active.');
} catch (err) {
console.Error(err.Süßkartoffel, err.Botschaft);
}

Sie können die inaktive Erkennung durch Aufrufen abbrechen
AbortControllerist
abort ()

Methode.

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

DevTools-Unterstützung

Ab Chrome 86 können Sie in Chrome DevTools Leerlaufereignisse emulieren, ohne tatsächlich inaktiv zu sein. Öffnen Sie in DevTools die Sensoren Tab und Suche Leerlaufdetektorstatus emulieren. Sie können die verschiedenen Optionen im Video unten sehen.

Puppenspieler stehen

Ab Version 5.3.1 von Puppeteer können Sie
emulieren Sie die verschiedenen Leerlaufzustände
um programmgesteuert zu testen, wie sich das Verhalten Ihrer Webanwendung ändert.

Manifestation

Sie können die Leerlauferkennungs-API in Aktion mit dem sehen Ephemeral Canvas Demo Dies löscht seinen Inhalt nach 60 Sekunden Inaktivität. Sie können sich vorstellen, dass dies in einem Kaufhaus implementiert wird, in dem Kinder kritzeln können.

Polyfüllung

Einige Aspekte der Leerlauferkennungs-API sind Mehrzweck- und Leerlauferkennungsbibliotheken wie z inactive.ts Sie existieren, aber diese Ansätze sind auf den Inhaltsbereich einer Webanwendung beschränkt: Die Bibliothek, die im Kontext der Webanwendung ausgeführt wird, muss teure Abfragen für Eingabeereignisse durchführen oder auf Änderungen der Sichtbarkeit achten. Noch restriktiver ist jedoch, dass Bibliotheken heute nicht erkennen können, wann ein Benutzer außerhalb seines Inhaltsbereichs inaktiv bleibt (z. B. wenn sich ein Benutzer auf einer anderen Registerkarte befindet oder sich von seinem Computer abmeldet).

Sicherheit und Berechtigungen

Das Chrome-Team hat die Idle Detection-API unter Verwendung der in definierten Grundprinzipien entworfen und implementiert Steuern Sie den Zugriff auf leistungsstarke Funktionen der Webplattform, einschließlich Benutzerkontrolle, Transparenz und Ergonomie. Die Fähigkeit, diese API zu verwenden, wird von der gesteuert
"Leerlauferkennung" erlauben. Um die API verwenden zu können, muss eine Anwendung auch auf einem ausgeführt werden
sicherer Kontext auf höchster Ebene.

Benutzerkontrolle und Datenschutz

Wir möchten immer verhindern, dass böswillige Akteure neue APIs missbrauchen. Scheinbar unabhängige Websites, die jedoch tatsächlich von derselben Entität kontrolliert werden, können inaktive Informationen vom Benutzer erhalten und die Daten korrelieren, um eindeutige Benutzer über alle Quellen hinweg zu identifizieren. Um diese Arten von Angriffen abzuschwächen, begrenzt die Leerlauferkennungs-API die Granularität der gemeldeten Leerlaufereignisse.

Feedback

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

Erzählen Sie uns etwas über das API-Design

Gibt es etwas in der API, das nicht wie erwartet funktioniert? Oder fehlen Ihnen Methoden oder Eigenschaften, die Sie zur Umsetzung Ihrer Idee benötigen? Haben Sie eine Frage oder einen Kommentar zum Sicherheitsmodell? Legen Sie ein Spezifikationsproblem in der entsprechenden Datei ab GitHub-Repositoryoder fügen Sie Ihre Gedanken zu einem bestehenden Problem hinzu.

Melden Sie ein Problem mit der Bereitstellung

Haben Sie einen Fehler bei der Chrome-Implementierung gefunden? Oder unterscheidet sich die Implementierung von der Spezifikation? Einen Fehler einreichen new.crbug.com. Stellen Sie sicher, dass Sie so viele Details wie möglich, einfache Anweisungen zum Reproduzieren und Eingeben enthalten Blinken> Eingabe beim Komponenten (bearbeiten) Box.
Fehler funktioniert hervorragend für das schnelle und einfache Teilen von Wiederholungen.

API-Unterstützung anzeigen

Denken Sie darüber nach, die Leerlauferkennungs-API zu verwenden? Ihr öffentlicher Support hilft dem Chrome-Team bei der Priorisierung von Funktionen und zeigt anderen Browser-Anbietern, wie wichtig es ist, diese zu unterstützen.

Teilen Sie mit, wie Sie es in der verwenden möchten WICG Speech Thread
Senden Sie einen Tweet an @Cromodev mit dem #idledetection Hashtag und lassen Sie uns wissen, wo und wie Sie es verwenden.

Nützliche Links

Vielen Dank

Die Leerlauferkennungs-API wurde von implementiert Sam gehe. DevTools-Unterstützung wurde von hinzugefügt Maksim Sadym. Dank an Joe Medley,
Kayce Basquesy
Reilly-Stipendium für ihre Bewertungen dieses Artikels. Das Bild des Helden ist von Fernando Hernandez im
Unsplash.