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ępnianych, 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ń, na przykład do tworzenia wykresów, mogą ograniczyć te obliczenia do momentów, gdy użytkownik wchodzi w interakcję ze swoim urządzeniem.

Obecny stan,

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

Jak korzystać z interfejsu Idle Detection API

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), agentem użytkownika jako całości lub systemem operacyjnym; ta definicja jest pozostawiona pełnomocnikowi użytkownika.

Korzystanie z interfejsu Idle Detection API

Pierwszym krokiem podczas korzystania z interfejsu API wykrywania bezczynności jest upewnienie się, że masz uprawnienie 'idle-detection'. Jeśli nie masz uprawnień, poproś o nie za pomocą IdleDetector.requestPermission(). Pamiętaj, że wywołanie tej metody wymaga działania 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ść parametru threshold to 60 tys. 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.');

Wsparcie dotyczące 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 nieaktywnego detektora w Narzędziach deweloperskich.

Wsparcie dotyczące Puppeteer

Od wersji 5.3.1 Puppeteer 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 demonstracji ulotnej karty, która 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 istnieją też biblioteki do wykrywania bezczynności, takie jak idle.ts, ale te metody 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. Co więcej, biblioteki nie mogą obecnie określić, kiedy użytkownik przestaje korzystać z ich treści (np. gdy korzysta z innej karty lub wyloguje się z komputera).

Zabezpieczenia i uprawnienia

Zespół Chrome opracował 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 ergonomii. Możliwość korzystania z tego interfejsu API jest kontrolowana przez uprawnienie '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ć wykorzystywaniu nowych interfejsów API przez osoby o złych zamiarach. Witryny pozornie niezależne, które w rzeczywistości 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.

Poinformuj nas o projektowaniu 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łaszanie problemów z implementacją

Czy znalazłeś/znalazłaś błąd w implementacji 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, proste instrukcje odtwarzania błędu i wpisz Blink>Input w polu Składniki. 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ł zaimplementowany 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.