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

Używaj interfejsu API wykrywania bezczynności, aby dowiedzieć się, kiedy użytkownik nie używa aktywnie urządzenia.

Thomas Steiner

Czym jest interfejs Idle Detection API?

Interfejs API wykrywania bezczynności informuje deweloperów, gdy użytkownik jest nieaktywny, np. nie korzysta z klawiatury, myszy, ekranu, nie aktywuje wygaszacza ekranu, nie blokuje ekranu ani nie przełącza się na inny ekran. Powiadomienie jest wywoływane przez określony przez dewelopera próg.

Sugerowane przypadki użycia interfejsu Idle Detection API

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

  • Aplikacje do czatu lub witryny sieci społecznościowych mogą używać tego interfejsu API, aby poinformować użytkownika, czy jego kontakty są obecnie dostępne.
  • Aplikacje kiosków publicznie udostępniane, np. w muzeach, mogą używać tego interfejsu API, aby powrócić do widoku „głównego”, jeśli nikt nie korzysta już z kiosku.
  • Aplikacje, które wymagają kosztownych obliczeń, np. do tworzenia wykresów, mogą ograniczać te obliczenia do sytuacji, w których użytkownik wchodzi w interakcję z urządzeniem.

Obecny stan,

Krok Stan
1. Tworzenie wyjaśnienia Zakończono
2. Tworzenie wstępnej wersji specyfikacji Zakończono
3. Zbieranie opinii i ulepszanie projektu W toku
4. Wersja próbna origin Gotowe
5. Wprowadzenie na rynek Chromium 94

Jak korzystać z interfejsu API Idle Detection

Wykrywanie cech

Aby sprawdzić, czy interfejs Idle Detection API jest obsługiwany:

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

Pojęcia związane z Idle Detection API

Interfejs API wykrywania bezczynności zakłada, że istnieje pewien poziom zaangażowania między użytkownikiem, agentem użytkownika (czyli przeglądarką) a systemem operacyjnym urządzenia. Jest ona reprezentowana w 2 wymiarach:

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

Odróżnienie active od idle wymaga heurystyki, która może się różnić w zależności od użytkownika, klienta użytkownika i systemu operacyjnego. Musi on być też odpowiednio wysoki (patrz Bezpieczeństwo i uprawnienia).

Model celowo nie rozróżnia formalnie interakcji z określonymi treściami (czyli stroną internetową w karcie korzystającej z interfejsu API), klienta użytkownika jako całości lub systemu operacyjnego; ta definicja jest pozostawiona klientowi użytkownika.

Używanie interfejsu Idle Detection API

Pierwszym krokiem podczas korzystania z interfejsu Idle Detection API jest przyznanie uprawnienia 'idle-detection'. Jeśli uprawnienia nie zostaną przyznane, musisz o nie poprosić w usłudze 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.');
}

Drugim krokiem jest utworzenie instancji klasy IdleDetector. Minimalna wartość threshold to 60 000 milisekund (1 minuta). Możesz w końcu rozpocząć wykrywanie bezczynności, wywołując metodę IdleDetector start(). Jako parametry przyjmuje obiekt z pożądanym czasem bezczynności threshold w milisekundach oraz opcjonalny obiekt signal z AbortSignal, aby przerwać wykrywanie bezczynności.

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ę AbortControllerabort().

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

Pomoc do Narzędzi deweloperskich

Od wersji Chromium 94 możesz emulować zdarzenia bezczynności w Narzędziach dla programistów bez faktycznego bezczynności. W Narzędziach deweloperskich otwórz kartę Czujniki i znajdź opcję Emuluj stan nieaktywnego detektora. Poniżej znajdziesz film z różnymi opcjami.

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

Zespół pomocy Puppeteer

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

Prezentacja

Interfejs API wykrywania bezczynności możesz zobaczyć w działaniu w demo Ephemeral Canvas, który po 60 sekundach nieaktywności usuwa swoje treści. Można sobie wyobrazić, że takie rozwiązanie jest używane w dziale sklepu, gdzie dzieci mogą rysować.

Demonstracja ulotnego obszaru roboczego

wypełnianie treścią zastępczą,

Niektóre aspekty interfejsu Idle Detection API można zastąpić biblioteką polyfill, a w przypadku wykrywania bezczynności dostępne są biblioteki takie jak idle.ts. Jednak te podejścia są ograniczone do obszaru treści aplikacji internetowej: biblioteka działająca w kontekście aplikacji internetowej musi często sprawdzać zdarzenia wejściowe lub reagować na zmiany widoczności. W większym stopniu jednak biblioteki nie są w stanie określić, kiedy użytkownik jest nieaktywny poza obszarem treści (np. gdy przejdzie na inną kartę lub wyloguje się z komputera).

Zabezpieczenia i uprawnienia

Zespół Chrome zaprojektował i wdrożył interfejs API wykrywania bezczynności, korzystając z podstawowych zasad określonych w artykule Kontrolowanie dostępu do zaawansowanych funkcji platformy internetowej, w tym kontroli użytkownika, przejrzystości i ergonomiki. Możliwość korzystania z tego interfejsu API zależy od uprawnienia 'idle-detection'. Aby korzystać z interfejsu API, aplikacja musi też działać w bezpiecznym kontekście najwyższego poziomu.

Kontrola użytkownika i prywatność

Zawsze chcemy zapobiegać złośliwemu wykorzystywaniu nowych interfejsów API. Witryny pozornie niezależne, które w istocie są kontrolowane przez ten sam podmiot, mogą uzyskiwać informacje o nieaktywnych użytkownikach i wykorzystywać te dane do identyfikowania unikalnych użytkowników z różnych źródeł. Aby ograniczyć tego typu ataki, interfejs API wykrywania bezczynności ogranicza szczegółowość zgłaszanych zdarzeń bezczynności.

Prześlij opinię

Zespół Chrome chce poznać Twoje wrażenia związane z interfejsem API wykrywania bezczynności.

Opowiedz nam o konstrukcji interfejsu API

Czy coś w interfejsie API nie działa zgodnie z oczekiwaniami? A może brakuje metod lub właściwości, których potrzebujesz do wdrożenia swojego pomysłu? Masz pytania lub uwagi dotyczące 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 znalazłeś/znalazłaś błąd w implementacji Chrome? Czy implementacja różni się od specyfikacji? Zgłoś błąd na stronie new.crbug.com. Podaj jak najwięcej szczegółów, proste instrukcje odtwarzania i wpisz Blink>Input w polu Komponenty. Glitch to świetne narzędzie do szybkiego i łatwego udostępniania informacji o powtarzających się problemach.

Pokaż informacje o pomocy dotyczącej interfejsu API

Zamierzasz używać interfejsu Idle Detection API? Twoja publiczna pomoc pomaga zespołowi Chrome ustalać priorytety funkcji i pokazuje innym dostawcom przeglądarek, jak ważne jest wspieranie tych funkcji.

Przydatne linki

Podziękowania

Interfejs Idle Detection API został wdrożony przez Sam Goto. Obsługa w Narzędziach deweloperskich została dodana przez Maksima Sadyma. Dziękujemy Joe Medley, Kayce Basques i Reilly Grant za sprawdzenie tego artykułu. Obraz główny autorstwa Fernando Hernandeza z Unsplash.