Progressive Web App 閒置中: Idle Detection API 空閒檢測入門實做 | 前端三分鐘

文章目錄

1. 什麼是 Idle Detection API
2. 怎麼使用 Idle Detection API

什麼是 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"
};

直接看官方的範例:

看瀏覽器是否存在 API
取得相關權限
New 一個 IdleDetector，最小的 threshold 目前是 60 秒
可以透過 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();