空闲检测 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

浏览器兼容性