Wykrywanie nieaktywnych użytkowników za pomocą interfejsu Idle Detection API

Za pomocą interfejsu Idle Detection API możesz sprawdzać, kiedy użytkownik aktywnie nie korzysta z urządzenia.

Thomas Steiner

Czym jest interfejs Idle Detection API?

Interfejs Idle Detection API powiadamia deweloperów, gdy użytkownik jest nieaktywny, na przykład o braku interakcja z klawiaturą, myszą, ekranem, aktywowanie wygaszacza ekranu, blokowanie ekranu, lub przejście na inny ekran. Powiadomienie jest wyzwalane przez próg zdefiniowany przez dewelopera.

Sugerowane przypadki użycia interfejsu Idle Detection API

Przykłady witryn, które mogą korzystać z tego interfejsu API:

  • Aplikacje do czatowania i witryny społecznościowe mogą używać tego interfejsu API, aby poinformować użytkownika, czy jego kontakty są obecnie dostępne.
  • Publicznie dostępne aplikacje kiosku, np. w muzeach, mogą za pomocą tego interfejsu API powrócić do strony głównej. sprawdzać, czy nikt nie korzysta już z kiosku.
  • aplikacje, które wymagają kosztownych obliczeń, np. do rysowania. może ograniczyć te obliczenia do momentów, gdy użytkownik wchodzi w interakcję z urządzeniem.

Obecny stan,

Krok Stan
1. Utwórz wyjaśnienie Zakończono
2. Utwórz początkową wersję roboczą specyfikacji Zakończono
3. Zbieraj opinie iterować projekt W toku
4. Wersja próbna origin Gotowe
5. Uruchomienie kampanii Chromium 94

Jak korzystać z interfejsu API Idle Detection

Wykrywanie cech

Aby sprawdzić, czy interfejs Idle Detection API jest obsługiwany, użyj polecenia:

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

Pojęcia związane z interfejsem Idle Detection API

Interfejs Idle Detection API zakłada, że istnieje pewien poziom zaangażowania między użytkownikiem klienta użytkownika (czyli przeglądarki) i systemu operacyjnego używanego urządzenia. Obejmuje to 2 wymiary:

  • Stan bezczynności użytkownika: active lub idle: użytkownik to zrobił lub nie z klientem użytkownika przez pewien czas.
  • Stan bezczynności ekranu: locked lub unlocked: system ma aktywną blokadę ekranu (np. wygaszacz ekranu), która uniemożliwia interakcji z klientem.

Odróżnienie active od idle wymaga stosowania metod heurystycznych, które mogą się różnić w zależności od użytkownika, klienta użytkownika i systemu operacyjnego. Powinien on być także dostatecznie przybliżony próg (zobacz Zabezpieczenia i uprawnienia).

Model celowo nie rozróżnia interakcji z konkretną treścią (tj. strona na karcie korzystającej z interfejsu API), klient użytkownika jako całość lub system operacyjny; definicja jest przekazywana klientowi użytkownika.

Używanie interfejsu Idle Detection API

Pierwszym krokiem podczas korzystania z interfejsu Idle Detection API jest aby sprawdzić, czy uprawnienie 'idle-detection' zostało przyznane. Jeśli nie masz uprawnień, musisz: poproś o nie przez IdleDetector.requestPermission(). Pamiętaj, że wywołanie tej metody wymaga gestu użytkownika.

// 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.');
}

Następnie trzeba utworzyć instancję IdleDetector. Minimalna wartość threshold to 60 000 milisekund (1 minuta). Na koniec możesz uruchomić wykrywanie bezczynności, wywołując Metoda start() za pomocą IdleDetector. Pobiera w milisekundach obiekt z żądaną wartością bezczynności threshold i opcjonalnie signal z parametrem AbortSignal. aby przerwać wykrywanie bezczynności jako parametry.

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);
}

Wykrywanie bezczynności możesz przerwać, wywołując metodę AbortController abort() .

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

Pomoc dotycząca Narzędzi deweloperskich

Od Chromium 94 możesz emulować zdarzenia bezczynności w Narzędziach deweloperskich bez pozostawania w stanie bezczynności. W Narzędziach deweloperskich otwórz kartę Czujniki i poszukaj opcji Emuluj stan detektora bezczynności. Różne opcje przedstawiliśmy w filmie poniżej.

Emulacja stanu wykrywania bezczynności w Narzędziach deweloperskich.

Zespół pomocy Puppeteer

Od wersji 5.3.1 firmy Puppeteer możesz emulować różne stany bezczynności aby automatycznie przetestować, jak zmienia się zachowanie aplikacji internetowej.

Prezentacja

Możesz zobaczyć, jak działa interfejs Idle Detection API w wersji demonstracyjnej tymczasowego obszaru roboczego, która usuwa treści po 60 sekundach braku aktywności. Można sobie wyobrazić, że jest to wdrażane w dziale, gdzie dzieci rysują.

Wersja demonstracyjna efemerycznego obszaru roboczego

Polyfill

Niektóre aspekty interfejsu Idle Detection API mogą zawierać kod polyfill i biblioteki wykrywania bezczynności, takie jak idle.ts, ale te podejścia ograniczają się do obszaru treści aplikacji internetowej: Biblioteka działająca w kontekście aplikacji internetowej musi przeprowadzać kosztowne sondowanie pod kątem zdarzeń wejściowych lub nasłuchiwać zmian widoczności. W większym stopniu jednak biblioteki nie są w stanie stwierdzić, kiedy użytkownik jest nieaktywny poza obszarem treści (np. gdy użytkownik jest na innej karcie lub wylogowanie się z komputera).

Bezpieczeństwo i uprawnienia

Zespół Chrome zaprojektował i wdrożył interfejs Idle Detection API, kierując się podstawowymi zasadami zdefiniowane w artykule Kontrolowanie dostępu do zaawansowanych funkcji platform internetowych, takich jak kontrola użytkownika, przejrzystość i ergonomia. Możliwość korzystania z tego interfejsu API zależy od Uprawnienie 'idle-detection'. Aby korzystać z tego interfejsu API, aplikacja musi również być uruchomiona w bezpieczny kontekst najwyższego poziomu.

Kontrola użytkowników i prywatność

Zawsze chcemy zapobiegać wykorzystywaniu nowych interfejsów API przez nieuczciwe podmioty. Strony pozornie niezależne, ale które w rzeczywistości są kontrolowane przez ten sam podmiot, mogą uzyskiwać informacje o bezczynności użytkownika skorelować dane w celu identyfikacji unikalnych użytkowników w różnych źródłach. Aby zminimalizować takie ataki, interfejs Idle Detection API ogranicza szczegółowość zgłaszanych zdarzeń bezczynności.

Prześlij opinię

Zespół Chrome chce dowiedzieć się więcej o Twoich doświadczeniach z interfejsem Idle Detection API.

Opowiedz nam o konstrukcji interfejsu API

Czy jest coś, co nie działa w interfejsie API zgodnie z oczekiwaniami? Czy może brakuje tu metod lub właściwości potrzebne do realizacji pomysłu? Masz pytanie lub komentarz na temat modelu zabezpieczeń? Zgłoś problem ze specyfikacją w odpowiednim repozytorium GitHub. lub opisz swój problem.

Zgłoś problem z implementacją

Czy wystąpił błąd z implementacją Chrome? Czy implementacja różni się od specyfikacji? Zgłoś błąd na new.crbug.com. Podaj jak najwięcej szczegółów. instrukcje dotyczące ponownego odtwarzania i wpisz Blink>Input w polu Komponenty. Usługa Glitch świetnie nadaje się do szybkiego i łatwego udostępniania poprawek.

Pokaż wsparcie dla interfejsu API

Czy zamierzasz korzystać z interfejsu Idle Detection API? Twoje publiczne wsparcie pomaga zespołowi Chrome w: nadaje priorytet funkcjom i pokazuje innym dostawcom przeglądarek, jak ważne jest ich wsparcie.

Przydatne linki

Podziękowania

Interfejs Idle Detection API został wdrożony przez Sam Goto. Obsługa Narzędzi deweloperskich dodał Maksim Sadym. Dzięki Joe Medley, Kayce Basques Reilly Grant za recenzję tego artykułu. Baner powitalny autorstwa Fernando Hernandeza Odchylenie.