使用 Idle Detection API 偵測閒置使用者

利用 Idle Detection API 來找出使用者未主動使用裝置的時間。

閒置偵測 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 概念

Idle Detection API 假設使用者、使用者代理程式 (即瀏覽器) 和使用中裝置作業系統之間存在一定程度的參與度。這會以兩個維度呈現:

  • 使用者閒置狀態: activeidle:使用者在一段時間內與使用者代理程式互動或未互動。
  • 螢幕閒置狀態: lockedunlocked:系統有有效的螢幕鎖定 (例如螢幕保護程式),可防止與使用者代理程式互動。

如要區分 activeidle,您需要使用推論法,但這可能會因使用者、使用者代理程式和作業系統而異。這也應是一個合理的粗略門檻 (請參閱「安全性和權限」)。

此模型刻意不正式區分與特定內容 (也就是使用 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 分鐘)。最後,您可以呼叫 IdleDetectorstart() 方法,啟動閒置偵測。這個方法會以毫秒為單位,取得具有所需閒置 threshold 的物件,並以選用的 signalAbortSignal 做為參數,以終止閒置偵測。

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);
}

您可以呼叫 AbortControllerabort() 方法,中斷閒置偵測。

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 團隊優先採用特定功能,以及向其他瀏覽器廠商說明支援這些功能的重要性。

實用連結

特別銘謝

Idle Detection API 由 Sam Goto 實作。開發人員工具支援 Maksim Sadym。感謝 Joe MedleyKayce BasquesReilly Grant 審查本文。主頁橫幅圖片由 Fernando HernandezUnsplash 上提供。