Idle Detection API를 사용하여 사용자가 기기를 활발하게 사용하지 않는 때를 파악합니다.
Idle Detection API란 무엇인가요?
Idle Detection API는 사용자가 유휴 상태일 때 개발자에게 이를 알려주며 키보드와의 상호작용, 마우스, 화면, 화면 보호기 활성화, 화면 잠금 다른 화면으로 이동할 수 있습니다 개발자가 정의한 임계값이 알림을 트리거합니다.
Idle Detection API에 대한 추천 사용 사례
이 API를 사용할 수 있는 사이트의 예는 다음과 같습니다.
- 채팅 애플리케이션 또는 온라인 소셜 네트워킹 사이트에서는 이 API를 사용하여 연락처에 현재 연락할 수 있습니다.
- 박물관 등 공개적으로 노출된 키오스크 앱은 이 API를 사용하여 '홈'으로 돌아갈 수 있습니다. 더 이상 키오스크와 상호작용하지 않는 경우 뷰를 확인할 수 있습니다.
- 예를 들어 차트 그리기, 는 사용자가 기기와 상호작용하는 순간으로 이러한 계산을 제한할 수 있습니다.
현재 상태
| 단계 | 상태 |
|---|---|
| 1. 설명 만들기 | 완전함 |
| 2. 사양의 초기 초안 만들기 | 완전함 |
| 3. 의견 수집 및 디자인 반복 | 진행 중 |
| 4. 오리진 트라이얼 | 완료됨 |
| 5. 출시 | Chromium 94 |
Idle Detection API 사용 방법
특성 감지
Idle Detection API가 지원되는지 확인하려면 다음을 사용하세요.
if ('IdleDetector' in window) {
// Idle Detector API supported
}
Idle Detection API 개념
Idle Detection API는 사용자 간에 어느 정도의 참여가 있다고 가정합니다. 사용자 에이전트 (브라우저)와 사용 중인 기기의 운영체제입니다. 이는 다음과 같은 두 가지 차원으로 표현됩니다.
- 사용자 유휴 상태:
active또는idle: 사용자 보유 여부 사용자 에이전트와 상호작용했다는 의미입니다. - 화면 유휴 상태:
locked또는unlocked: 시스템에 활성 화면 잠금 (예: 화면 보호기)이 있어 사용자 에이전트와의 상호작용을 살펴보겠습니다
active와 idle를 구별하려면 사용자, 사용자 에이전트,
운영체제가 포함됩니다 또한 기준점은 비교적 대략적이어야 합니다.
보안 및 권한을 참고하세요.
모델이 특정 콘텐츠와의 상호작용을 공식적으로 구분하지 않음 (즉, API를 사용하는 탭의 웹페이지), 사용자 에이전트 전체 또는 운영체제 이 정의는 사용자 에이전트에게 있습니다.
Idle Detection 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가 있는 객체를 밀리초 단위로 가져옵니다.
및 선택적 signal
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);
}
다음을 호출하여 유휴 감지를 취소할 수 있습니다.
AbortController님의
abort()
메서드를 사용하여 축소하도록 요청합니다.
controller.abort();
console.log('IdleDetector is stopped.');
DevTools 지원
Chromium 94부터는 실제로 유휴 상태가 되지 않은 상태에서 DevTools에서 유휴 이벤트를 에뮬레이션할 수 있습니다. DevTools에서 센서 탭을 열고 유휴 상태 감지기 상태 에뮬레이션을 찾습니다. 아래 동영상에서 다양한 옵션을 확인할 수 있습니다.
<ph type="x-smartling-placeholder">Puppeteer 지원
Puppeteer 버전 5.3.1부터 다양한 유휴 상태 에뮬레이션을 를 사용하여 웹 앱의 동작이 어떻게 변경되는지 프로그래매틱 방식으로 테스트합니다.
데모
Idle Detection API가 작동을 확인하는 임시 캔버스 데모에서는 콘텐츠 콘텐츠를 표시할 수 있습니다. 하나의 부서에 배포되고 아이들이 낙서할 수 있는 스토어도 있습니다.
폴리필링
Idle Detection API의 일부 측면은 폴리필이 가능합니다. idle.ts와 같은 유휴 감지 라이브러리도 존재합니다. 그러나 이러한 접근 방식은 웹 앱의 자체 콘텐츠 영역으로 제한됩니다. 웹 앱의 컨텍스트에서 실행되는 라이브러리 비용이 많이 들게 입력 이벤트를 폴링하거나 가시성 변경을 수신 대기해야 함 그러나 보다 제한적으로, 라이브러리에서 사용자가 유휴 상태가 되는 시점을 알 수 없음 콘텐츠 영역 밖에 있을 수 있습니다 (예: 사용자가 다른 탭을 보고 있는 경우). 컴퓨터에서 아예 로그아웃되어 있어야 합니다.
보안 및 권한
Chrome팀은 핵심 원칙을 사용하여 Idle Detection API를 설계하고 구현했습니다.
강력한 웹 플랫폼 기능에 대한 액세스 제어에 정의되어 있음
사용자 제어, 투명성, 인체공학을 포함합니다.
이 API를 사용할 수 있는 기능은
'idle-detection' 권한이 있는지 확인합니다.
API를 사용하려면 앱이
최상위 보안 컨텍스트를 참조하세요.
사용자 제어 및 개인 정보 보호
Google은 악의적인 행위자가 새로운 API를 오용하지 못하도록 항상 막고자 합니다. 겉보기에는 독립된 웹사이트처럼 보이지만 그러나 실제로 동일한 주체에 의해 제어되므로 사용자의 유휴 정보를 입수할 수 있고 데이터의 상관관계를 분석하여 출처 전체에서 순 사용자를 식별합니다. 이러한 종류의 공격을 완화하려면 Idle Detection API는 보고된 유휴 이벤트의 세부사항을 제한합니다.
의견
Chrome팀에서 Idle Detection API 사용 경험에 관한 의견을 듣고자 합니다.
API 설계에 대해 알려주세요.
API에서 예상대로 작동하지 않는 부분이 있나요? 또는 누락된 메서드가 있나요? 속성이 있나요? 보안 모델에 대한 질문이나 의견이 있습니까? 해당하는 GitHub 저장소에서 사양 문제를 신고합니다. 기존 문제에 내 생각을 추가할 수 있습니다
구현 문제 신고
Chrome 구현에서 버그를 발견하셨나요? 아니면 구현이 사양과 다른가요?
new.crbug.com에서 버그를 신고합니다. 최대한 자세하게 작성해 주시기 바랍니다.
구성요소 상자에 Blink>Input를 입력합니다.
Glitch는 쉽고 빠른 재현을 공유하는 데 효과적입니다.
API 지원 표시
Idle Detection API를 사용할 계획이신가요? 여러분의 공개적 지원은 Chrome팀이 다음을 수행하는 데 도움이 됩니다. 기능의 우선순위를 지정하고 해당 기능을 지원하는 것이 얼마나 중요한지 다른 브라우저 공급업체에 보여줍니다.
- WICG 담화 대화목록에서 사용 계획을 공유합니다.
- 해시태그를 사용하여 @ChromiumDev에 트윗을 보냅니다.
#IdleDetection어디서 어떻게 사용하는지 Google에 알려주세요.
유용한 링크
- 공개 설명
- 사양 초안
- Idle Detection API 데모 | Idle Detection API 데모 소스
- 버그 추적
- ChromeStatus.com 항목
- 깜박임 구성요소:
Blink>Input
감사의 말씀
Idle Detection API는 Sam Goto가 구현했습니다. Maksim Sadym이 DevTools 지원을 추가했습니다. Joe Medley님, 감사합니다. 케이스 바스케스 이 기사를 검토한 라일리 그랜트 히어로 이미지는 Fernando Hernandez의 스플래시 해제.