空閒檢測 API

可用性有限

此特性不是基線特性,因為它在一些最廣泛使用的瀏覽器中不起作用。

安全上下文: 此功能僅在安全上下文(HTTPS)中可用,且支援此功能的瀏覽器數量有限。

實驗性: 這是一項實驗性技術
在生產中使用此技術之前,請仔細檢查瀏覽器相容性表格

注意:此功能在 專用 Web Workers 中可用。

空閒檢測 API 提供了一種方法來檢測使用者的空閒狀態,包括“活躍”、“空閒”和“鎖定”狀態,並能在空閒狀態發生變化時得到通知,而無需透過指令碼進行輪詢。

概念與用法

原生應用程式和瀏覽器擴充套件程式會根據使用者是否正在與裝置互動來調整使用者體驗。例如,聊天應用程式可以向其他使用者顯示某人是否可用。其他應用程式可能會選擇僅在使用者與應用程式互動時顯示通知。Web 應用程式可以使用此 API 來實現類似的使用場景。此外,漸進式 Web 應用(Progressive Web App)可以使用空閒檢測來在應用未被使用時觸發服務工作執行緒更新。

介面

IdleDetector 實驗性

提供用於檢測裝置或螢幕上使用者活動的 methods 和 events。

示例

以下示例展示瞭如何建立一個檢測器並記錄使用者空閒狀態的變化。使用一個按鈕來獲取必要的使用者啟用,然後再請求許可權。

js
const controller = new AbortController();
const signal = controller.signal;

startButton.addEventListener("click", async () => {
  if ((await IdleDetector.requestPermission()) !== "granted") {
    console.error("Idle detection permission denied.");
    return;
  }

  try {
    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: 60_000,
      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);
  }
});

stopButton.addEventListener("click", () => {
  controller.abort();
  console.log("IdleDetector is stopped.");
});

規範

規範
空閒檢測 API
# api-idledetector

瀏覽器相容性