利用 Idle Detection API 來找出使用者未主動使用裝置的時間。
什麼是 Idle Detection API?
閒置偵測 API 會在使用者處於閒置狀態時通知開發人員,指出使用者未與鍵盤、滑鼠、螢幕互動、啟用螢幕保護程式、鎖定螢幕或移至其他螢幕等情況。由開發人員定義的門檻觸發通知。
Idle Detection API 的建議用途
以下是可能會使用這個 API 的網站:
- 聊天應用程式或線上社群網站可以使用這個 API,讓使用者知道他們的聯絡人目前是否可及。
- 公開公開的資訊站應用程式 (例如在博物館中) 如果任何人都不再與資訊站互動,就能使用這個 API 返回「首頁」檢視畫面。
- 需要耗費大量運算資源的應用程式 (例如繪製圖表),可以將這些運算限制在使用者與裝置互動時執行。
目前狀態
如何使用 Idle Detection API
特徵偵測
如要檢查是否支援閒置偵測 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
使用閒置偵測 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。雖然看似獨立的網站,但實際上由同一實體控制,可能會取得使用者閒置資訊,並將這些資料相互關聯,以便在不同來源中識別不重複使用者。為減輕這類攻擊,Idle Detection 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 示範 | Idle Detection API 示範來源
- 追蹤錯誤
- ChromeStatus.com 項目
- Blink 元件:
Blink>Input
特別銘謝
Idle Detection API 由 Sam Goto 實作。開發人員工具支援 Maksim Sadym。感謝 Joe Medley、Kayce Basques 和 Reilly Grant 審查本文。主頁橫幅圖片由 Fernando Hernandez 在 Unsplash 上提供。