使用 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 概念

閒置偵測 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」。你可以在下方影片中查看各種選項。

開發人員工具中的 Idle Detector 狀態模擬。

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 團隊決定功能優先順序,並向其他瀏覽器供應商顯示支援這些功能的重要性。

實用連結

特別銘謝

Idle Detection API 由 Sam Goto 實作。Maksim Sadym 新增了開發人員工具支援功能。感謝 Joe MedleyKayce BasquesReilly Grant 審查本文。主頁橫幅由 Fernando Hernandez 提供 Unsplash 網站上。