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

Interfejs Idle Detection API pozwala ustalić, kiedy użytkownik nie korzysta aktywnie z urządzenia.

Thomas Steiner

Czym jest interfejs Idle Detection API?

Interfejs Idle Detection API powiadamia programistów, gdy użytkownik jest nieaktywny, wskazując np. brak interakcji z klawiaturą, myszą, ekranem, włączenie wygaszacza ekranu, zablokowanie ekranu lub przełączenie się na inny ekran. Powiadomienie jest wysyłane po przekroczeniu określonego przez dewelopera progu.

Sugerowane przypadki użycia interfejsu Idle Detection API

Przykłady witryn, w których można używać tego interfejsu API:

  • Aplikacje do obsługi czatu i witryny społecznościowe mogą używać tego interfejsu API do informowania użytkownika, czy jego kontakty są obecnie dostępne.
  • Publicznie dostępne aplikacje kiosku, na przykład w muzeach, mogą używać tego interfejsu API, aby wrócić do widoku „dom”, jeśli nikt już z niego nie korzysta.
  • Aplikacje, które wymagają kosztownych obliczeń, np. do rysowania wykresów, mogą ograniczać te obliczenia do momentów interakcji użytkownika z urządzeniem.

Obecny stan,

Step Stan
1. Utwórz wyjaśnienie Zakończono
2. Utwórz wstępną wersję roboczą specyfikacji Zakończono
3. Zbieranie opinii i ulepszanie projektu W toku
4. Testowanie origin Zakończono
5. Uruchomienie kampanii Chromium 94

Jak korzystać z interfejsu Idle Detection API

Wykrywanie funkcji

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

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, klientem użytkownika (czyli przeglądarką) a systemem operacyjnym używanego urządzenia. Jest to przedstawione w 2 wymiarach:

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

Odróżnienie pola active od idle wymaga stosowania parametrów heurystycznych, które mogą się różnić w zależności od użytkownika, klienta użytkownika i systemu operacyjnego. Powinien on też być odpowiednio przybliżony (patrz Zabezpieczenia i uprawnienia).

Model celowo nie rozróżnia formalnie między interakcjami z konkretnymi treściami (czyli stroną internetową na karcie przy użyciu interfejsu API), klientem użytkownika jako całością ani systemem operacyjnym.

Korzystanie z interfejsu Idle Detection API

Pierwszym krokiem podczas korzystania z interfejsu Idle Detection API jest sprawdzenie, czy zostało przyznane uprawnienie 'idle-detection'. Jeśli to uprawnienie nie jest przyznane, musisz poprosić o niego w 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.');
}

W drugim kroku utworzysz instancję IdleDetector. Minimalna wartość threshold to 60 000 milisekund (1 minuta). Na koniec możesz rozpocząć wykrywanie bezczynności, wywołując metodę start() obiektu IdleDetector. Aby przerwać wykrywanie bezczynności jako parametrów, obiekt musi mieć żądaną wartość threshold w milisekundach, a opcjonalnie signal z parametrem AbortSignal.

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

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

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

Obsługa Narzędzi deweloperskich

Począwszy od Chromium 94, możesz emulować zdarzenia bezczynności w Narzędziach deweloperskich bez konieczności bezczynności. W Narzędziach deweloperskich otwórz kartę Czujniki i poszukaj opcji Emuluj stan wykrywania bezczynności. Różne opcje przedstawiliśmy w filmie poniżej.

Emulacja stanu detektora bezczynności w narzędziach deweloperskich.

Wsparcie dla kukiełki

Od wersji 5.3.1 Puppeteer możesz emulować różne stany bezczynności, aby automatycznie testować zmiany w działaniu aplikacji internetowej.

Pokaz

Możesz zobaczyć, jak działa interfejs Idle Detection API w prezentacji Ephemeral Canvas, która usuwa jej zawartość po 60 sekundach braku aktywności. Wyobraźcie sobie, że program został wdrożony w domu towarowym, gdzie dzieci będą rysować.

Wersja demonstracyjna Canvas

Polyfill

Niektóre elementy interfejsu Idle Detection API są wielofunkcyjne i biblioteki wykrywania bezczynności, takie jak idle.ts, istnieją jednak, ale metody te są ograniczone do obszaru treści aplikacji internetowej: biblioteka działająca w kontekście aplikacji internetowej musi przeprowadzać kosztowne ankiety na zdarzenia wejściowe lub nasłuchiwać zmian widoczności. Jednak w bardziej restrykcyjny sposób biblioteki nie są w stanie określić, kiedy użytkownik jest nieaktywny poza obszarem treści (np. gdy użytkownik korzysta z innej karty lub został całkowicie wylogowany).

Zabezpieczenia i uprawnienia

Zespół Chrome zaprojektował i wdrożył interfejs Idle Detection API zgodnie z podstawowymi zasadami określonymi w kontroli dostępu do zaawansowanych funkcji platformy internetowej, takimi jak kontrola użytkownika, przejrzystość i ergonomia. Możliwość korzystania z tego interfejsu API określa uprawnienie 'idle-detection'. Aby można było korzystać z interfejsu API, aplikacja musi też być uruchomiona w bezpiecznym kontekście najwyższego poziomu.

Kontrola i prywatność użytkowników

Nieustannie staramy się zapobiegać niewłaściwemu wykorzystaniu nowych interfejsów API przez szkodliwe podmioty. Pozornie niezależne witryny, które w rzeczywistości są kontrolowane przez ten sam podmiot, mogą uzyskiwać informacje o nieaktywnych użytkownikach i skorelować je, aby identyfikować unikalnych użytkowników w różnych źródłach. Aby ograniczyć tego typu ataki, interfejs Idle Detection API ogranicza szczegółowość zgłaszanych zdarzeń bezczynności.

Prześlij opinię

Zespół Chrome chce poznać Twoją opinię o interfejsie Idle Detection API.

Opowiedz nam o projekcie interfejsu API

Czy jest coś, co nie działa w interfejsie API zgodnie z oczekiwaniami? A może brakuje metod lub właściwości, które potrzebujesz do realizacji swojego pomysłu? Masz pytanie lub komentarz na temat modelu zabezpieczeń? Zgłoś problem ze specyfikacją w odpowiednim repozytorium GitHub lub dodaj swoje uwagi do istniejącego problemu.

Zgłoś problem z implementacją

Czy wystąpił błąd związany z implementacją przeglądarki Chrome? A może implementacja różni się od specyfikacji? Zgłoś błąd na stronie new.crbug.com. Podaj jak najwięcej szczegółów i proste instrukcje odtwarzania, a następnie wpisz Blink>Input w polu Komponenty. Usterki to świetny sposób na udostępnianie szybkich i łatwych replik.

Pokaż obsługę interfejsu API

Czy zamierzasz korzystać z interfejsu Idle Detection API? Twoja publiczna pomoc pomaga zespołowi Chrome priorytetowo traktować funkcje 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 DevTools dodała Maksim Sadym. Dziękujemy Joe Medley, Kayce Basques i Reilly Grant za recenzję tego artykułu. Baner powitalny autorstwa: Fernando Hernandez w filmie Unsplash.