什麼是 Idle Detection API

Idle Detection API 的設計是當 App 被用戶閒置超過設定的時間時觸發，目前這個 API 還在提議的階段。

API 的相關文件: https://wicg.github.io/idle-detection/

空閒檢測可以解決什麼問題?

• 聊天的應用可以透過這個來顯示聯絡人狀態
• 博物館中公開互動的 Web App 若無人使用可以自動回到首頁
• 挖礦等級耗費效能的運算可以等到閒置時執行

在有這個 API 前其實有個 visibilitychange 事件能夠達到一半的目的，瀏覽器會偵測是否還 Focus 在當前的 Tab。

document.addEventListener("visibilitychange", function () {
  if (document.visibilityState === "visible") {
    backgroundMusic.play();
  } else {
    backgroundMusic.pause();
  }
});

怎麼使用 Idle Detection API

主要是透過用戶、螢幕兩方面去偵測

• 用戶空閒狀態：停止操作 (active 或 idle)
• 螢幕空閒狀態：螢幕鎖定（locked 或 unlocked）

enum UserIdleState {
    "active",
    "idle"
};

enum ScreenIdleState {
    "locked",
    "unlocked"
};

直接看官方的範例:

1. 看瀏覽器是否存在 API
2. 取得相關權限
3. New 一個 IdleDetector，最小的 threshold 目前是 60 秒
4. 可以透過 abort 去終止

const main = async () => {
  // 有就可以用
  if (!("IdleDetector" in window)) {
    return console.log("IdleDetector is not available.");
  }
  // 但還是需要先取得權限
  if ((await IdleDetector.requestPermission()) !== "granted") {
    return console.log("Idle detection permission not granted.");
  }

  try {
    const controller = new AbortController();
    const signal = controller.signal;

    const idleDetector = new IdleDetector();
    idleDetector.addEventListener("change", () => {
      console.log(
        `Idle change: ${idleDetector.userState}, ${idleDetector.screenState}.`
      );
    });
    await idleDetector.start({
      threshold: 60000,
      signal,
    });
    console.log("IdleDetector is active.");

    window.setTimeout(() => {
      controller.abort();
      console.log("IdleDetector is stopped.");
    }, 120000);
  } catch (err) {
    // Deal with initialization errors like permission denied,
    // running outside of top-level frame, etc.
    console.error(err.name, err.message);
  }
};

main();

這也是一個漸進式增強的實際的範例，讓 App 能夠逐步支援更多的功能。

這個頁面在勾選觸發後，只要在 60 秒不活動後就會清除繪畫的內容。這個應用案例可以想像這成被部署在公眾場合供參觀的使用者塗鴉。

Demo 連結: https://idle-detection.glitch.me/