Idle Detection API로 비활성 사용자 감지

Thomas Steiner

게시일: 2020년 5월 18일

Browser Support

유휴 감지 API는 사용자가 유휴 상태일 때 개발자에게 알림을 보내 키보드, 마우스, 화면과의 상호작용 부족, 화면 보호기 활성화, 화면 잠금, 다른 화면으로 이동 등의 사항을 나타냅니다. 개발자가 정의한 기준에 따라 알림이 트리거됩니다.

Idle Detection API의 권장 사용 사례

이 API를 사용할 수 있는 사이트의 예는 다음과 같습니다.

채팅 애플리케이션이나 온라인 소셜 네트워킹 사이트는 이 API를 사용하여 연락처에 연결할 수 있는지 사용자에게 알릴 수 있습니다.
박물관과 같이 공개적으로 노출된 키오스크 앱은 이 API를 사용하여 더 이상 키오스크와 상호작용하는 사람이 없으면 '홈' 뷰로 돌아갈 수 있습니다.
예를 들어 차트를 그리기 위해 비용이 많이 드는 계산이 필요한 앱은 사용자가 기기와 상호작용하는 순간으로 이러한 계산을 제한할 수 있습니다.

API 사용

Idle Detection API가 지원되는지 확인하려면 다음을 사용하세요.

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

API 개념

유휴 감지 API는 사용자, 사용자 에이전트 (브라우저), 사용 중인 기기의 운영체제 간에 어느 정도의 참여가 있다고 가정합니다. 이는 다음 두 가지 차원으로 표현됩니다.

사용자 유휴 상태: active 또는 idle: 사용자가 일정 기간 동안 사용자 에이전트와 상호작용했거나 상호작용하지 않았습니다.
화면 유휴 상태: locked 또는 unlocked: 시스템에 활성 화면 잠금 (예: 화면 보호기)이 있어 사용자 에이전트와의 상호작용이 방지됩니다.

active와 idle를 구분하려면 사용자, 사용자 에이전트, 운영체제에 따라 다를 수 있는 휴리스틱이 필요합니다. 또한 적절히 대략적인 기준이어야 합니다(보안 및 권한 참고).

이 모델은 특정 콘텐츠(즉, API를 사용하는 탭의 웹페이지), 사용자 에이전트 전체 또는 운영체제와의 상호작용을 공식적으로 구분하지 않습니다. 이 정의는 사용자 에이전트에게 맡겨져 있습니다.

권한 요청 및 인스턴스화

Idle Detection API를 사용할 때 첫 번째 단계는 'idle-detection' 권한이 부여되었는지 확인하는 것입니다. 권한이 부여되지 않은 경우 IdleDetector.requestPermission()로 권한을 요청해야 합니다. 이 메서드를 호출하려면 사용자 동작이 필요합니다.

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

두 번째 단계는 IdleDetector를 인스턴스화하는 것입니다. 최소 threshold은 60,000밀리초 (1분)입니다. 마지막으로 IdleDetector의 start() 메서드를 호출하여 유휴 상태 감지를 시작할 수 있습니다. 이 메서드는 유휴 threshold(밀리초)와 AbortSignal이 있는 선택적 signal를 유휴 감지를 중단하는 매개변수로 사용합니다.

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

유휴 상태 감지 중지

AbortController의 abort() 메서드를 호출하여 유휴 상태 감지를 중단할 수 있습니다.

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

DevTools 지원

실제로 유휴 상태가 아니어도 DevTools에서 유휴 이벤트를 에뮬레이션할 수 있습니다. DevTools에서 센서 탭을 열고 유휴 감지기 상태 에뮬레이션을 찾습니다. 동영상에서 다양한 옵션을 확인할 수 있습니다.

DevTools에서 유휴 상태 감지기 상태 에뮬레이션

Puppeteer 지원

Puppeteer 버전 5.3.1부터는 다양한 유휴 상태를 에뮬레이션하여 웹 앱의 동작이 어떻게 변경되는지 프로그래매틱 방식으로 테스트할 수 있습니다.

데모

60초 동안 비활성 상태이면 콘텐츠가 지워지는 일시적 캔버스 데모를 통해 유휴 감지 API가 작동하는 것을 확인할 수 있습니다. 아이들이 낙서를 할 수 있도록 백화점에 배치할 수 있습니다.

임시 캔버스 데모

폴리필

유휴 감지 API의 일부 측면은 폴리필이 가능하고 idle.ts와 같은 유휴 감지 라이브러리가 있지만 이러한 접근 방식은 웹 앱의 자체 콘텐츠 영역으로 제한됩니다. 웹 앱의 컨텍스트에서 실행되는 라이브러리는 입력 이벤트를 비싸게 폴링하거나 표시 상태 변경을 수신해야 합니다. 하지만 라이브러리는 사용자가 콘텐츠 영역 외부에서 유휴 상태가 되는 시점 (예: 사용자가 다른 탭에 있거나 컴퓨터에서 완전히 로그아웃한 경우)을 알 수 없습니다.

보안 및 권한

Chrome팀은 사용자 제어, 투명성, 인체공학 등 강력한 웹 플랫폼 기능에 대한 액세스 제어에 정의된 핵심 원칙을 사용하여 유휴 감지 API를 설계하고 구현했습니다. 이 API를 사용할 수 있는 기능은 'idle-detection' 권한에 의해 제어됩니다. API를 사용하려면 앱이 최상위 보안 컨텍스트에서 실행되어야 합니다.

사용자 관리 및 개인 정보 보호

Google은 항상 악의적인 행위자가 새로운 API를 오용하지 못하도록 방지하고자 합니다. 겉으로는 독립적인 웹사이트이지만 실제로는 동일한 법인에 의해 관리되는 웹사이트는 사용자 유휴 상태 정보를 획득하고 데이터를 상관관계 분석하여 출처 간에 고유한 사용자를 식별할 수 있습니다. 이러한 종류의 공격을 완화하기 위해 유휴 감지 API는 보고된 유휴 이벤트의 세부사항을 제한합니다.

의견

API가 예상대로 작동하지 않는 부분이 있나요? 또는 아이디어를 구현하는 데 필요한 메서드나 속성이 누락되어 있나요? 보안 모델에 관해 궁금한 점이나 의견이 있으신가요? 해당 GitHub 저장소에 사양 문제를 제출하거나 기존 문제에 의견을 추가합니다.

구현 문제 신고

Chrome 구현에서 버그를 발견하셨나요? 아니면 구현이 사양과 다른가요? new.crbug.com에서 버그를 신고합니다. 최대한 많은 세부정보와 재현을 위한 간단한 안내를 포함하고 구성요소 상자에 Blink>Input를 입력합니다.

API 지원 표시

Idle Detection API를 사용할 계획이신가요? 공개적인 지원은 Chrome팀이 기능의 우선순위를 정하는 데 도움이 되며 다른 브라우저 공급업체에 이러한 기능을 지원하는 것이 얼마나 중요한지 보여줍니다.

WICG Discourse 스레드에서 사용할 계획을 공유하세요.
#IdleDetection 해시태그를 사용하여 @ChromiumDev에 트윗을 보내 어디에서 어떻게 사용하고 있는지 알려주세요.

유용한 링크

공개 설명서
초안 사양
Idle Detection API 데모 | Idle Detection API 데모 소스
버그 추적
ChromeStatus.com 항목
Blink 구성요소: Blink>Input

감사의 말씀

Idle Detection API는 Sam Goto가 구현했습니다. Maksim Sadym이 DevTools 지원을 추가했습니다. 검토에 참여해 주신 조 메들리, 케이시 바스크, 라일리 그랜트님께 감사드립니다.