使用 Idle Detection API 偵測閒置使用者

使用閒置偵測 API 找出使用者未使用裝置的時間。

Thomas Steiner

什麼是 Idle Detection API？

閒置偵測 API 會在使用者處於閒置狀態時通知開發人員，指出使用者未與鍵盤、滑鼠、螢幕互動、啟用螢幕保護程式、鎖定螢幕或移至其他螢幕等情況。開發人員定義的門檻會觸發通知。

建議的閒置偵測 API 用途

以下是可能會使用這個 API 的網站：

  • 聊天應用程式或線上社群網站可以使用這個 API，讓使用者知道他們的聯絡人目前是否可及。
  • 公開開放的資訊站應用程式 (例如博物館) 可使用此 API，在沒有人與資訊站互動時返回「首頁」檢視畫面。
  • 需要耗費大量運算資源的應用程式 (例如繪製圖表)，可以將這些運算限制在使用者與裝置互動時執行。

目前狀態

步驟 狀態
1. 建立說明 完成
2. 建立規格初稿 完成
3. 收集意見回饋並重複設計 進行中
4. 來源試用 已完成
5. 發布 Chromium 94

如何使用 Idle Detection API

特徵偵測

如要檢查是否支援閒置偵測 API，請使用：

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

Idle Detection API 概念

閒置偵測 API 會假設使用者、使用者代理程式 (也就是瀏覽器) 和使用中的裝置作業系統之間，存在某種程度的互動。這會以兩個維度呈現：

  • 使用者閒置狀態： active 或 idle：使用者在一段時間內與使用者代理程式互動或未互動。
  • 螢幕閒置狀態： locked 或 unlocked：系統有有效的螢幕鎖定 (例如螢幕保護程式)，可防止與使用者代理程式互動。

如要區分 active 和 idle，您需要使用推論法，但這可能會因使用者、使用者代理程式和作業系統而異。這也應是一個合理的粗略門檻 (請參閱「安全性和權限」)。

此模型刻意不正式區分與特定內容 (也就是使用 API 的瀏覽器分頁中的網頁)、使用者代理程式整體或作業系統的互動情形，而是將此定義交由使用者代理程式處理。

使用 Idle Detection API

使用閒置偵測 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.');

開發人員工具支援

從 Chromium 94 開始，您可以在不必實際閒置的情況下，在開發人員工具中模擬閒置事件。在開發人員工具中，開啟「Sensors」分頁，然後尋找「Emulate Idle Detector state」。你可以在下方影片中查看各種選項。

開發人員工具中的 Idle Detector 狀態模擬。

Puppeteer 支援

自 Puppeteer 5.3.1 版起，您可以模擬各種閒置狀態，以程式輔助方式測試網路應用程式的行為變化。

示範

您可以透過短暫畫布示範，瞭解閒置偵測 API 的運作方式，該示範會在閒置 60 秒後清除畫布內容。您可以想像將這項功能部署在百貨公司，讓孩子在上面塗鴉。

暫時畫布示範

聚酯纖維

閒置偵測 API 的部分內容可進行 polyfill，且有閒置偵測程式庫 (例如 idle.ts)，但這些方法受到網頁應用程式本身內容區域的限制：在網頁應用程式背景執行的程式庫，需要耗費大量資源來輪詢輸入事件或監聽可見度變更。不過，在更嚴格的限制下，目前的程式庫無法判斷使用者在內容區域外閒置的時間 (例如使用者在其他分頁中或已完全登出電腦)。

安全性和權限

Chrome 團隊根據「控管強大網路平台功能的存取權」一文中定義的核心原則，設計並實作閒置偵測 API，包括使用者控制、透明度和人體工學。使用此 API 的權限由 'idle-detection' 權限控管。如要使用 API，應用程式也必須在頂層安全環境中執行。

使用者控制權與隱私權

我們一向希望避免惡意人士濫用新的 API。雖然看似獨立的網站，實際上是由同一實體控管，因此可能會取得使用者閒置資訊，並將這些資料相互關聯，以便在不同來源中識別不重複使用者。為減輕這類攻擊，Idle Detection API 會限制回報的閒置事件精細程度。

意見回饋

Chrome 團隊希望瞭解你使用閒置偵測 API 的體驗。

請告訴我們 API 設計

API 是否有任何部分無法正常運作？或者，您是否缺少實作想法所需的方法或屬性？對安全性模型有疑問或意見嗎？ 請在對應的 GitHub 存放區中提出規格問題，或在現有問題中加入您的想法。

回報實作問題

你是否發現 Chrome 實作項目有錯誤？或者實作方式與規格不同？請前往 new.crbug.com 回報錯誤。請務必盡可能提供詳細資訊，並在「Components」方塊中輸入 Blink>Input，以便重現問題。Glitch 可讓您輕鬆快速地分享重現內容。

顯示對 API 的支援

您打算使用 Idle Detection API 嗎？你的公開支持有助於 Chrome 團隊決定功能優先順序，並向其他瀏覽器供應商顯示支援這些功能的重要性。

實用連結

特別銘謝

Idle Detection API 由 Sam Goto 實作。Maksim Sadym 新增了開發人員工具支援功能。感謝 Joe Medley、Kayce Basques 和 Reilly Grant 審查本文。主頁橫幅圖片由 Fernando Hernandez 在 Unsplash 上提供。