利用 Idle Detection API 來找出使用者未主動使用裝置的時間。
什麼是 Idle Detection API？
閒置偵測 API 會在使用者處於閒置狀態時通知開發人員，指出使用者未與鍵盤、滑鼠、螢幕互動、啟用螢幕保護程式、鎖定螢幕或移至其他螢幕等情況。開發人員定義的門檻會觸發通知。
Idle Detection 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」。你可以在下方影片中查看各種選項。
Puppeteer 支援
自 Puppeteer 5.3.1 版起，您可以模擬各種閒置狀態，以程式輔助方式測試網路應用程式的行為變化。
示範
您可以透過短暫畫布示範，瞭解閒置偵測 API 的運作方式，該示範會在閒置 60 秒後清除畫布內容。您可以想像將這項功能部署在百貨公司，讓孩子在上面塗鴉。
聚酯纖維
閒置偵測 API 的部分內容可進行 polyfill，且有閒置偵測程式庫 (例如 idle.ts)，但這些方法受到網頁應用程式本身內容區域的限制：在網頁應用程式背景執行的程式庫，需要耗費大量資源來輪詢輸入事件或監聽可見度變更。不過，在更嚴格的限制下，目前的程式庫無法判斷使用者在內容區域外閒置的時間 (例如使用者在其他分頁中或已完全登出電腦)。
安全性和權限
Chrome 團隊根據「控管強大網路平台功能的存取權」一文中定義的核心原則，設計並實作閒置偵測 API，包括使用者控制、透明度和人體工學。使用此 API 的權限由 'idle-detection' 權限控管。如要使用 API，應用程式也必須在頂層安全環境中執行。
使用者控制權和隱私權
我們一直致力防範惡意行為人濫用新的 API。雖然看似獨立的網站，但實際上由同一實體控制，可能會取得使用者閒置資訊，並將這些資料相互關聯，以便在不同來源中識別不重複使用者。為減輕這類攻擊，閒置偵測 API 會限制回報的閒置事件精細程度。
意見回饋
Chrome 團隊希望瞭解你使用閒置偵測 API 的體驗。
請與我們分享 API 設計
API 是否有任何部分無法正常運作？或者，您是否缺少實作想法所需的方法或屬性？您對安全性模型有疑問或意見嗎？請在對應的 GitHub 存放區中提出規格問題，或在現有問題中加入您的想法。
回報導入問題
你是否發現 Chrome 實作項目有錯誤？或者實作方式與規格不同？請前往 new.crbug.com 回報錯誤。請務必盡可能提供詳細資訊，並在「Components」方塊中輸入 Blink>Input，以便重現問題。Glitch 有便捷的報復工具，
顯示 API 支援
您打算使用 Idle Detection API 嗎？你的公開支持有助於 Chrome 團隊決定功能優先順序，並向其他瀏覽器供應商顯示支援這些功能的重要性。
- 請在 WICG Discourse 討論串中分享您打算如何使用這項功能。
- 使用主題標記
#IdleDetection發送推文給 @ChromiumDev，告訴我們你在何處使用這項功能，以及使用方式。
實用連結
特別銘謝
Idle Detection API 由 Sam Goto 實作。Maksim Sadym 新增了開發人員工具支援功能。感謝 Joe Medley、Kayce Basques 和 Reilly Grant 審查本文。主頁橫幅由 Fernando Hernandez 提供 Unsplash 網站上。