利用 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.');
開發人員工具支援
從 Chromium 94 開始，您可以在開發人員工具中模擬閒置事件，不必實際處於閒置狀態。 在開發人員工具中開啟「Sensors」分頁，然後尋找「Emulate Idle Detector status」。 下方影片會顯示各種選項。
Puppeteer 支援
自 Puppeteer 5.3.1 版起，您可以： 模擬各種閒置狀態 透過程式輔助方式測試網頁應用程式的行為變化。
示範
您可以透過 Ephemeral Canvas 示範瞭解 Idle Detection API 的實際操作，他們會清除它的 內容。您可以想像要將這項功能部署至部門 以便小朋友在上面塗鴉。
聚合
Idle Detection API 有某些層面為 polyfillable 還有閒置偵測程式庫，例如 idle.ts 不過，這些方法僅限於網頁應用程式本身的內容領域： 在網頁應用程式環境下執行的程式庫 則需要高昂成本輪詢輸入事件，或是監聽瀏覽權限變更。 不過，嚴格來說，程式庫無法判斷使用者何時處於閒置狀態 位於內容區域之外 (例如使用者瀏覽不同分頁時) 或登出電腦)。
安全性和權限
Chrome 團隊根據核心原則設計並實作 Idle Detection API
(定義於控管強大的 Web Platform 功能存取權) 中，
包括使用者控制權、資訊公開以及人因工程學
這個 API 的功能是由
'idle-detection' 權限。
如要使用這個 API，應用程式必須在
頂層安全內容。
使用者控制權和隱私權
我們一直致力防範惡意行為人濫用新的 API。看似獨立網站 但事實上，由同一個實體控管，或許能取得使用者閒置資訊，並 與資料建立關聯，以識別各來源的不重複使用者。為減輕這類攻擊的影響 Idle Detection API 會限制回報的閒置事件精細程度。
意見回饋
Chrome 團隊想瞭解您使用 Idle Detection API 的心得。
請與我們分享 API 設計
您覺得這個 API 有什麼不如預期的運作方式？或者缺少某些方法 需要實現什麼構想？ 對安全性模型有任何疑問或意見嗎？ 在對應的 GitHub 存放區上提出規格問題， 或為現有問題補充意見
回報導入問題
您發現 Chrome 實作錯誤嗎？還是採用與規格不同？
前往 new.crbug.com 回報錯誤。請務必盡量提供詳細資料
重現問題的簡單操作說明，然後在「Components」(元件) 方塊中輸入 Blink>Input。
Glitch 有便捷的報復工具，
顯示對 API 的支援
您是否打算使用 Idle Detection API？您的公開支援可幫助 Chrome 團隊： 優先開發功能，並向其他瀏覽器廠商說明支援這些功能的重要性。
- 歡迎前往 WICG Discourse 討論串，說明這項工具的運用方式。
- 使用主題標記將推文傳送至 @ChromiumDev
#IdleDetection敬上 ，並說明你使用這項服務的位置和方式。
實用連結
特別銘謝
Idle Detection API 是由 Sam Goto 實作。 開發人員工具支援 Maksim Sadym。 感謝 Joe Medley： Kayce Basques 和 Reilly Grant 團隊對於這篇文章的評論。 主頁橫幅由 Fernando Hernandez Unsplash。