Idle Detection API 浏览器支持

Idle Detection API —— IdleDetector 接口让页面查询用户是否在给定阈值内与设备 发生过交互，以及屏幕是否被锁定；任一状态翻转时都会触发 change 事件。

浏览器与生态支持

• 图例
• 支持
• 部分支持
• 需开启标志
• 不支持
• 未知

浏览器 / 平台	支持	版本	置信度	来源	备注
Chrome (Desktop)	支持	94	高	来源	—
Chrome (Android)	支持	94	高	来源	1
Edge (Desktop)	支持	114	高	来源	—
Firefox (Desktop)	不支持	—	高	来源	2
Firefox (Android)	不支持	—	高	来源	34
Safari (macOS)	不支持	—	高	来源	5
Safari (iOS)	不支持	—	高	来源	67
Samsung Internet	支持	17.0	高	来源	8
WebView (Android)	支持	94	高	来源	9

1. 由 browser-compat-data 镜像自 Chrome 的数据推导。
2. browser-compat-data 未记录 Firefox 的支持。
3. browser-compat-data 未记录 Firefox for Android 的支持。
4. 由 browser-compat-data 镜像自 Firefox 的数据推导。
5. browser-compat-data 未记录 Safari 的支持。
6. browser-compat-data 未记录 iOS 版 Safari 的支持。
7. 由 browser-compat-data 镜像自 Safari 的数据推导。
8. 由 browser-compat-data 镜像自 Chrome Android 的数据推导。
9. 由 browser-compat-data 镜像自 Chrome Android 的数据推导。

源数据: /compatibility/idle-detection.json · 全球使用占比: 72 % (StatCounter 2026-05)

来源: 规范 · MDN · 最近核验 2026-10-03 · 置信度: 高 (由来源计算)

如何使用

规范指出，若未授予 idle-detection 权限，start() 将失败；若没有短暂的用户激活， IdleDetector.requestPermission() 将拒绝——因此它应当写在用户手势的处理函数内。 start() 接受以毫秒为单位的 threshold：

// 最小可运行示例：先创建处理函数所需的控件，再绑定事件。
const startButton = document.createElement('button');
startButton.type = 'button';
startButton.textContent = '开始监测空闲状态';
document.body.append(startButton);

startButton.addEventListener('click', async () => {
  const permission = await IdleDetector.requestPermission();
  if (permission !== 'granted') return;

  const detector = new IdleDetector();
  detector.addEventListener('change', () => {
    console.log(`User: ${detector.userState}, Screen: ${detector.screenState}`);
  });
  await detector.start({ threshold: 60_000 });
});

userState 的取值为 "active" 或 "idle"；screenState 的取值为 "locked" 或 "unlocked"。

如何在运行时检测

在引用该类之前先检测 window 上是否存在 IdleDetector，并在缺失时走明确的回退分支：

async function watchIdleState(onChange) {
  if (!('IdleDetector' in window)) {
    // IdleDetector 不可用，因此报告 unknown，并让该功能的界面保持隐藏。
    onChange({ userState: 'unknown', screenState: 'unknown' });
    return;
  }

  const permission = await IdleDetector.requestPermission();
  if (permission !== 'granted') {
    onChange({ userState: 'unknown', screenState: 'unknown' });
    return;
  }

  const detector = new IdleDetector();
  detector.addEventListener('change', () => {
    onChange({ userState: detector.userState, screenState: detector.screenState });
  });
  await detector.start({ threshold: 60_000 });
}

实践清单

• 根据 MDN，该 API 仅在安全上下文中可用，因此不安全的来源根本不会暴露 IdleDetector。
• 在用户手势内调用 IdleDetector.requestPermission()——根据 MDN，它需要短暂的用户激活。
• 根据 WICG 规范，当 threshold 低于 60,000 毫秒时 start() 会以 TypeError 拒绝； 无法要求更细粒度的上报。
• WICG 规范将 userState 与 screenState 的初始值设为 null，因此不要在构造 探测器后立即读取它们。
• 根据 MDN browser-compat-data，Firefox 与 Safari 均未实现 IdleDetector， 因此这些浏览器会走上面的回退分支。

下一步

完整参考（权限模型、change 事件、阈值规则）见 Idle Detection API。

另见 Screen Wake Lock——它解决的是相反的问题： 让屏幕保持唤醒，而不是观察屏幕何时锁定。

← 返回兼容性浏览器。