利用 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 概念
閒置偵測 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 網站上。