使用 Idle Detection API,瞭解使用者是否經常使用裝置。
什麼是閒置偵測 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
}
閒置偵測 API 概念
Idle Detection API 會假設使用者、使用者代理程式 (即瀏覽器) 和使用中的裝置作業系統之間都有一定程度的參與度。這以兩個維度表示:
- 使用者閒置狀態:
active
或idle
:使用者已有一段時間或未與使用者代理程式互動。 - 螢幕閒置狀態:
locked
或unlocked
:系統已啟用螢幕鎖定 (例如螢幕保護程式),阻止與使用者代理程式互動。
區分 active
和 idle
需要經驗法則,可能會因使用者、使用者代理程式和作業系統而異。這個名稱也應是合理粗略的門檻 (請參閱安全性和權限一節)。
模型刻意不會明確區分與特定內容的互動情形 (亦即使用 API 的分頁中網頁)、整個使用者代理程式或作業系統;這個定義將歸屬於使用者代理程式。
使用閒置偵測 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
例項化。最小值為 60,000 毫秒 (1 分鐘)。threshold
最後,您可以呼叫 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 狀態」。如要瞭解不同選項,請觀看下方影片。
Puppeteer 支援
自 Puppeteer 5.3.1 版起,您可以模擬各種閒置狀態,透過程式輔助方式測試網頁應用程式行為的變化。
操作示範
您可以觀看 Idle Detection API 的實際運作情形,請參考暫時畫布示範,在閒置 60 秒後清除其內容。可想像一下,他們會部署在百貨公司 讓孩子盡情塗鴉。
聚填
Idle Detection API 的某些方面是可補充和閒置偵測程式庫 (例如 idle.ts),但這些方法只適用於網頁應用程式本身的內容區域:在網頁應用程式環境中執行的程式庫,需要對輸入事件進行高成本的輪詢,或監聽瀏覽權限變更。但是更嚴格來說,程式庫無法判斷使用者何時在內容區域外 (例如使用者位於不同分頁或完全登出電腦) 何時進入閒置狀態。
安全性和權限
Chrome 團隊根據「控管強大的網頁平台功能存取權」中所述的核心原則,設計及實作 Idle Detection API,其中包括使用者控制項、資訊公開和人體工學。這個 API 的使用權限是由 'idle-detection'
權限控管。為了使用這個 API,應用程式也必須在頂層安全環境中執行。
使用者控制項與隱私權
我們一直希望防範惡意人士濫用新的 API。看似獨立的網站,但實際上是由同一個實體控管,可能會取得使用者閒置資訊並建立資料關聯,以識別各來源的不重複使用者。為緩解這類攻擊,Idle Detection API 會限制回報的閒置事件精細程度。
意見回饋:
Chrome 團隊想瞭解你的 Idle Detection API 使用體驗。
告訴我們 API 設計
該 API 有什麼功能不如預期嗎?或者您需要實作提案的方法或屬性嗎?如果您對安全性模型有任何疑問或意見,在對應的 GitHub 存放區上提交規格問題,或是將您的想法新增至現有問題中。
回報導入問題
您在執行 Chrome 時發現錯誤了嗎?或者,實作項目是否與規格不同?
前往 new.crbug.com 回報錯誤。請務必盡可能提供詳細的細節與重現簡易操作說明,並在「元件」方塊中輸入 Blink>Input
。Glitch 適合用來快速分享簡單快速的提案,
展現對 API 的支援
您是否打算使用 Idle Detection API?在公開支援的協助下,Chrome 團隊可以優先推出功能,並讓其他瀏覽器廠商瞭解到這項功能有多重要。
- 請在 WICG Discourse 討論串上分享計畫使用方式。
- 請使用主題標記
#IdleDetection
將 Tweet 訊息傳送至 @ChromiumDev,並告訴我們您的使用地點和方式。
實用連結
特別銘謝
Idle Detection API 是由 Sam Goto 實作。Maksim Sadym 已新增開發人員工具支援功能。感謝 Joe Medley、Kayce Basques 和 Reilly Grant 針對這篇文章的評論。主頁橫幅由 Fernando Hernandez 於 Unsplash 網站上。