Idle Detection API で非アクティブ ユーザーを検出する

Idle Detection API を使用して、ユーザーがデバイスの操作をしていない時間帯を検出します。

Thomas Steiner

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 は、ユーザーとリソースの間である程度のエンゲージメントがあると想定しています。 使用しているデバイスのユーザー エージェント（ブラウザ）、オペレーティング システムといった情報が含まれます。 これは次の 2 つの次元で表されます。

  • ユーザーのアイドル状態: active または idle: ユーザーが持っている、または持っていない 一定期間ユーザーエージェントと やり取りをしたことを指します
  • 画面がアイドル状態: locked または unlocked: システムに有効な画面ロック（スクリーンセーバーなど）があり、 やり取りできます。

active と idle を区別するには、ユーザー、ユーザー エージェント、 OS を指定しますまた、ある程度おおまかなしきい値にする必要があります。 （セキュリティと権限をご覧ください）。

モデルが特定のコンテンツに対するインタラクションを意図的に区別していない （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 で [Sensors] タブを開き、[Emulate Idle Detector state] を探します。 さまざまなオプションについては、下の動画をご覧ください。

<ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">
</ph> DevTools でのアイドル状態検出の状態のエミュレーション

Puppeteer のサポート

Puppeteer バージョン 5.3.1 以降、 さまざまなアイドル状態をエミュレート を使用して、ウェブアプリの動作の変化をプログラマティックにテストできます。

デモ

Idle Detection API の動作を確認するには、エフェメラル キャンバスのデモで コンテンツに対して 60 秒間操作がなかった場合に、これをある部門にデプロイすれば 子供向けの絵を描くストアを作ったのです。

エフェメラル Canvas のデモ

ポリフィル

Idle Detection API の一部はポリフィル可能 idle.ts などのアイドル状態検出ライブラリが存在します。 ただし、以下のアプローチはウェブアプリ固有のコンテンツ領域に限定されます。 ウェブアプリのコンテキストで実行されるライブラリ 入力イベントのポーリングや可視性の変化のリッスンなどの、コストのかかる処理を行う必要があります。 ただし、より厳密な制限により、現在、ライブラリはユーザーがアイドル状態になったタイミングを認識できない コンテンツ領域外（ユーザーが別のタブを開いたときなど） パソコンから完全にログアウトするなどです

セキュリティと権限

Chrome チームは、コア原則に基づいて Idle Detection API を設計、実装しました。 強力なウェブ プラットフォーム機能へのアクセスの制御で定義されています。 あらゆる側面に関与しています。 この API を使用できるかどうかは、 'idle-detection' 権限。 また、API を使用するには、アプリが トップレベルの安全なコンテキストを提供します。

ユーザー コントロールとプライバシー

Google は、悪意のある人物が新しい API を不正使用することを防ぐことを常に望んでいます。一見独立しているようなウェブサイト 同じ法人によって管理されているにもかかわらず、ユーザーのアイドル状態の情報を取得し、 データを関連付けてオリジン間のユニーク ユーザーを特定します。この種の攻撃を軽減するために Idle Detection API は、報告されるアイドル イベントの粒度を制限します。

フィードバック

Idle Detection API の使用経験について、Chrome チームまでご連絡ください。

API 設計について教えてください

API で想定どおりに機能していないものはありますか？あるいは不足しているメソッドがあるか アイデアを実現するために必要なものやプロパティは？ セキュリティ モデルについて質問や意見がある場合は、 対応する GitHub リポジトリで仕様の問題を報告します。 既存の問題に意見を追加したりできます

実装に関する問題を報告する

Chrome の実装にバグは見つかりましたか？または、実装が仕様と異なっていますか？ new.crbug.com でバグを報告します。できるだけ詳細に説明してください [Components] ボックスに「Blink>Input」と入力します。 Glitch は、すばやく簡単に再現を共有するのに最適です。

API のサポートを表示する

Idle Detection API を使用する予定はありますか？皆様の公開サポートは、Chrome チームが次のことを実現できるように支援します。 他のブラウザ ベンダーがそれらの機能をサポートすることの重要性を説明します。

  • どのように使用する予定なのかを WICG の談話スレッドで共有してください。
  • ハッシュタグを使用して @ChromiumDev にツイートしてください #IdleDetection どこで、どのように使用されているかをお知らせください。

関連情報

謝辞

Idle Detection API は Sam Goto によって実装されました。 DevTools のサポートは Maksim Sadym によって追加されました。 Joe Medley に感謝します。 Kayce Basques Reilly Grant。この記事の評価。 ヒーロー画像は、Fernando Hernandez 氏による スプラッシュを解除。