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

Thomas Steiner

發布日期：2020 年 5 月 18 日

Browser Support

Source

當使用者處於閒置狀態時，閒置偵測 API 會通知開發人員，指出使用者未與鍵盤、滑鼠或螢幕互動、啟動螢幕保護程式、鎖定螢幕或移至其他螢幕。當值達到開發人員定義的門檻時，系統就會觸發通知。

Idle Detection API 的建議用途

可能使用這項 API 的網站包括：

即時通訊應用程式或線上社群網站可使用這項 API，讓使用者瞭解聯絡人是否可聯絡。
舉例來說，如果使用者不再與公開展示的資訊站應用程式 (例如博物館中的應用程式) 互動，這項 API 就能讓應用程式返回「首頁」檢視畫面。
如果應用程式需要進行耗費資源的計算 (例如繪製圖表)，可以限制這類計算的執行時機，只在使用者與裝置互動時進行。

使用 API

如要檢查是否支援 Idle Detection API，請使用：

if ('IdleDetector' in window) {
  // Idle Detector API supported
}

API 概念

Idle Detection API 會假設使用者、使用者代理程式 (即瀏覽器) 和所用裝置的作業系統之間存在某種程度的互動。這項資訊會以二維形式呈現：

使用者閒置狀態： active 或 idle：使用者在一段時間內與使用者代理程式互動或未互動。
螢幕閒置狀態： locked 或 unlocked：系統已啟用螢幕鎖定 (例如螢幕保護程式)，因此無法與使用者代理程式互動。

如要區分 active 和 idle，需要使用啟發式方法，但這類方法可能因使用者、使用者代理程式和作業系統而異。此外，門檻也應合理粗略 (請參閱「安全性與權限」)。

模型刻意不正式區分與特定內容 (也就是使用 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。 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.');

開發人員工具支援

您可以在開發人員工具中模擬閒置事件，不必實際處於閒置狀態。在開發人員工具中開啟「感應器」分頁，然後尋找「模擬閒置偵測器狀態」。影片中會顯示各種選項。

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

支援 Puppeteer

從 Puppeteer 5.3.1 版開始，您可以模擬各種閒置狀態，以程式輔助方式測試網頁應用程式的行為變化。

示範

您可以透過暫時性 Canvas 示範，瞭解 Idle Detection API 的運作方式。這項示範會在閒置 60 秒後清除內容。您可以想像在百貨公司的兒童區部署這項功能，讓孩子隨意塗鴉。

暫時性畫布示範

Polyfill

閒置偵測 API 的某些層面可進行 Polyfill，且存在 idle.ts 等閒置偵測程式庫，但這些方法僅限於網頁應用程式本身的內容區域：在網頁應用程式環境中執行的程式庫需要耗費大量資源輪詢輸入事件，或監聽顯示狀態變化。不過，如果使用者在內容區域外閒置 (例如在其他分頁上或完全登出電腦)，程式庫就無法判斷使用者是否閒置。

安全性和權限

Chrome 團隊設計及實作 Idle Detection API 時，採用了「控管強大的網頁平台功能存取權」中定義的核心原則，包括使用者控制權、透明度和人體工學。使用這項 API 的權限由 'idle-detection' 權限控管。如要使用 API，應用程式也必須在頂層安全環境中執行。

使用者控制項與隱私權

我們一向致力於防範惡意行為人濫用新版 API。看似獨立的網站，但實際上是由同一實體控管，可能會取得使用者閒置資訊，並將資料相互關聯，以識別不同來源的不重複使用者。為減輕這類攻擊，Idle Detection API 會限制回報閒置事件的精細程度。

意見回饋

API 是否有任何功能無法如預期運作？或者，是否有缺少的方法或屬性，導致您無法實作想法？對安全模式有任何疑問或意見嗎？在對應的 GitHub 存放區中提出規格問題，或在現有問題中新增想法。

回報導入問題

您是否發現 Chrome 實作方式有錯誤？還是實作方式與規格不同？前往 new.crbug.com 提出錯誤回報。請務必盡可能提供詳細資訊、重現問題的簡單操作說明，並在「Components」(元件) 方塊中輸入 Blink>Input。

支援 API

您是否打算使用 Idle Detection API？您的公開支持有助於 Chrome 團隊優先處理功能，並向其他瀏覽器供應商展現支援這些功能的重要性。

在 WICG Discourse 討論串中分享您的使用計畫。
使用主題標記 #IdleDetection 傳送推文給 @ChromiumDev，告訴我們您在哪裡使用這項功能，以及使用方式。

實用連結

特別銘謝

Idle Detection API 由 Sam Goto 實作。 Maksim Sadym 新增了開發人員工具支援。感謝 Joe Medley、 Kayce Basques 和 Reilly Grant 審查。