Progressive Web App 闲置中: Idle Detection API 空闲检测入门实做 (20)

什麽是 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/