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

Thomas Steiner

Opublikowano: 18 maja 2020 r.

Interfejs Idle Detection API powiadamia deweloperów, gdy użytkownik jest nieaktywny, np. gdy nie korzysta z klawiatury, myszy ani ekranu, gdy włączy się wygaszacz ekranu, gdy ekran zostanie zablokowany lub gdy użytkownik przejdzie na inny ekran. Powiadomienie jest wywoływane 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 lub internetowe serwisy społecznościowe mogą używać tego interfejsu API, aby informować użytkownika, czy jego kontakty są dostępne.
• Publicznie dostępne aplikacje kiosku, np. w muzeach, mogą używać tego interfejsu API, aby powrócić do widoku „głównego”, jeśli nikt już nie korzysta z kiosku.
• Aplikacje, które wymagają kosztownych obliczeń, np. do rysowania wykresów, mogą ograniczać te obliczenia do momentów, w których użytkownik korzysta z urządzenia.

Korzystanie z interfejsu API

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

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

Pojęcia związane z interfejsem API

Interfejs Idle Detection API zakłada, że istnieje pewien poziom interakcji między użytkownikiem, klientem użytkownika (czyli przeglądarką) a systemem operacyjnym używanego urządzenia. Można to przedstawić w 2 wymiarach:

• Stan bezczynności użytkownika: active lub idle: użytkownik w określonym czasie wchodził lub nie wchodził w interakcję z klientem użytkownika.
• Stan bezczynności ekranu: locked lub unlocked: system ma aktywną blokadę ekranu (np. wygaszacz), która uniemożliwia interakcję z agentem użytkownika.

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. Powinien to być też dość ogólny próg (patrz Bezpieczeństwo i uprawnienia).

Model celowo nie rozróżnia formalnie interakcji z określonymi treściami (czyli stroną internetową na karcie korzystającą z interfejsu API), agentem użytkownika jako całością ani systemem operacyjnym. Definicja ta jest pozostawiona agentowi użytkownika.

Wysyłanie prośby o uprawnienia i tworzenie instancji

Pierwszym krokiem podczas korzystania z interfejsu Idle Detection API jest upewnienie się, że przyznano uprawnienie 'idle-detection'. Jeśli uprawnienie nie zostanie przyznane, musisz o nie poprosić za pomocą 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 IdleDetector. Minimalna wartość threshold to 60 000 milisekund (1 minuta). Możesz w końcu rozpocząć wykrywanie braku aktywności, wywołując metodę start() obiektu IdleDetector. Jako parametry przyjmuje obiekt z wartością threshold w milisekundach i opcjonalną wartością signal z wartością AbortSignal, która służy do przerwania wykrywania braku aktywnoś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);
}

Zatrzymywanie wykrywania braku aktywności

Możesz przerwać wykrywanie braku aktywności, wywołując metodę AbortControllerabort().

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

Obsługa Narzędzi deweloperskich

Możesz emulować zdarzenia bezczynności w Narzędziach deweloperskich bez faktycznego stanu bezczynności. W Narzędziach deweloperskich otwórz kartę Czujniki i poszukaj opcji Emuluj stan wykrywania braku aktywności. Różne opcje są widoczne w filmie.

Obsługa Puppeteer

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

Prezentacja

Działanie interfejsu Idle Detection API możesz zobaczyć na demonstracji Ephemeral Canvas, która usuwa zawartość po 60 sekundach braku aktywności. Można sobie wyobrazić, że takie urządzenie jest używane w sklepie z zabawkami, gdzie dzieci mogą na nim rysować.

Wypełnienie

Niektóre aspekty interfejsu Idle Detection API można uzupełnić, a biblioteki wykrywania braku aktywności, takie jak idle.ts, już istnieją. Jednak te podejścia są ograniczone do obszaru treści aplikacji internetowej: biblioteka działająca w kontekście aplikacji internetowej musi często odpytywać o zdarzenia wejściowe lub nasłuchiwać zmian widoczności. Biblioteki nie mogą jednak obecnie określić, kiedy użytkownik przestaje być aktywny poza obszarem treści (np. gdy użytkownik jest na innej karcie lub wylogował się z komputera).

Zabezpieczenia i uprawnienia

Zespół Chrome zaprojektował i wdrożył interfejs Idle Detection API zgodnie z głównymi zasadami określonymi w dokumencie Controlling Access to Powerful Web Platform Features, w tym z zasadami dotyczącymi 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ć niewłaściwemu wykorzystywaniu nowych interfejsów API przez nieuczciwe podmioty. Pozornie niezależne witryny, które w rzeczywistości są kontrolowane przez ten sam podmiot, mogą uzyskiwać informacje o nieaktywności użytkownika i korelować dane, 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ę

Czy w API jest coś, co nie działa tak, jak oczekujesz? Czy brakuje metod lub właściwości, które są potrzebne do realizacji Twojego pomysłu? Masz pytanie lub komentarz dotyczący modelu zabezpieczeń? Zgłoś problem ze specyfikacją w odpowiednim repozytorium GitHub lub dodaj swoje uwagi do istniejącego problemu.

Zgłaszanie problemu z implementacją

Czy w implementacji Chrome występuje błąd? Czy implementacja różni się od specyfikacji? Zgłoś błąd na stronie new.crbug.com. Podaj jak najwięcej szczegółów, proste instrukcje odtworzenia problemu i wpisz Blink>Input w polu Komponenty.

Wyrażanie poparcia dla interfejsu API

Czy zamierzasz używać interfejsu Idle Detection API? Twoje publiczne wsparcie pomaga zespołowi Chrome ustalać priorytety funkcji i pokazuje innym dostawcom przeglądarek, jak ważne jest ich obsługiwanie.

• Opisz, jak zamierzasz z niej korzystać, w wątku na forum WICG Discourse.
• Wyślij tweeta do @ChromiumDev z hasztagiem #IdleDetection i napisz, gdzie i jak korzystasz z tej funkcji.

Przydatne linki

• Wyjaśnienie publiczne
• Specyfikacja wersji roboczej
• Demo interfejsu Idle Detection API | Źródło demo interfejsu Idle Detection API
• Błąd śledzenia
• Wpis na ChromeStatus.com
• Komponent Blink: Blink>Input

Podziękowania

Interfejs Idle Detection API został wdrożony przez Sama Goto. Obsługę Narzędzi deweloperskich dodał Maksim Sadym. Dziękujemy za opinie Joe Medleyowi, Kayce Basques i Reilly Grantowi.