Idle detection
Idle Detection API の IdleDetector インターフェイスは、デバイスまたは画面上でのユーザーのアクティビティを検出するためのメソッドとイベントを提供します。
このインターフェイスはセキュアコンテキストを必要とします。
EventTarget IdleDetector
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
IdleDetector 実験的 | 94 | 114 | | | 94 | |
| HTML 属性 | ||||||
allow (idle-detection) 実験的 | 94 | 94 | | | 94 | |
| DOM API | ||||||
change_event 実験的 IdleDetector インターフェイスの変更イベントは、userState または screenState の値が変更されたときに発生します。 | 94 | 114 | | | 94 | |
IdleDetector 実験的 IdleDetector() コンストラクターは、ユーザーがデバイスを操作しなくなったとき、または画面がロックされたときを示すイベントを提供する新しい IdleDetector オブジェクトを作成します。 | 94 | 114 | | | 94 | |
| IdleDetector インターフェイスの requestPermission() 静的メソッドは、ユーザーがオリジンにアイドル状態へのアクセスを許可するかどうかを選択したときに、文字列で解決される Promise を返します。 受け入れの場合は「許可」、拒否の場合は「拒否」で解決します。 | 94 | 114 | | | 94 | |
screenState 実験的 IdleDetector インターフェイスの screenState 読み取り専用プロパティは、画面がロックされているかどうか (「ロック」または「ロック解除」のいずれか) を示す文字列を返します。 | 94 | 114 | | | 94 | |
start 実験的 IdleDetector インターフェイスの start() メソッドは、検出器がユーザーのアイドル状態の変化の監視を開始したときに解決される Promise を返します。 このメソッドは、非アクティブ状態が報告されるミリ秒単位のしきい値を含むオプションのオプション オブジェクトを受け取り、アイドル検出器を中止するための AbortSignal の信号を受け取ります。 | 94 | 114 | | | 94 | |
userState 実験的 IdleDetector インターフェイスの userState 読み取り専用プロパティは、start() の呼び出し以降にユーザーがデバイスと対話したかどうかを示す文字列を返します。 | 94 | 114 | | | 94 | |
| その他 | ||||||
idle-detection 実験的 HTTP の Permissions-Policy ヘッダーの idle-detection ディレクティブは、現在の文書がIdle Detection API を使用して、ユーザーが端末を操作しているかどうかを検出することを許可するかどうかを制御します。例えば、チャットアプリケーションで「利用可能」/「離席中」のステータスを報告する場合などです。 | 94 | 94 | | | 94 | |
- このバージョンで機能が削除されました (96)
- このバージョンで機能が削除されました (96)
- このバージョンで機能が削除されました (96)
- このバージョンで機能が削除されました (96)
- このバージョンで機能が削除されました (96)
- このバージョンで機能が削除されました (96)
- このバージョンで機能が削除されました (96)
基本構文
const controller = new AbortController();
const signal = controller.signal;
startButton.addEventListener("click", async () => {
if ((await IdleDetector.requestPermission()) !== "granted") {
console.error("Idle detection permission denied.");
return;
}
try {
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: 60_000,
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);
}
});
stopButton.addEventListener("click", () => {
controller.abort();
console.log("IdleDetector is stopped.");
}); 実務での使いどころ
-
Idle detection の活用
Idle Detection API の IdleDetector インターフェイスは、デバイスまたは画面上でのユーザーのアクティビティを検出するためのメソッドとイベントを提供します。
注意点
- 一部のブラウザでのみ対応。使用前にブラウザサポートを確認すること。
実装メモ
- 一部の API はセキュアコンテキスト (HTTPS) やユーザー操作起点を必要とする。利用前に要件を確認すること。