使用 Idle Detection API 检测非活跃用户

Thomas Steiner

发布日期：2020 年 5 月 18 日

Browser Support

Source

当用户处于闲置状态时，闲置检测 API 会通知开发者，闲置状态包括未与键盘、鼠标、屏幕进行互动、启动屏保、锁定屏幕或移动到其他屏幕等。开发者定义的阈值会触发通知。

Idle Detection API 的建议用例

以下是一些可能使用此 API 的网站示例：

聊天应用或在线社交网站可以使用此 API 让用户知道其联系人是否可联系。
公开展示的自助服务终端应用（例如博物馆中的自助服务终端应用）可以使用此 API 在无人再与自助服务终端互动时返回到“主”视图。
需要进行大量计算的应用（例如用于绘制图表的应用）可以将这些计算限制在用户与设备互动时进行。

使用 API

如需检查是否支持 Idle Detection API，请使用：

if ('IdleDetector' in window) {
  // Idle Detector API supported
}

API 概念

Idle Detection API 假设用户、用户代理（即浏览器）和所用设备的操作系统之间存在一定程度的互动。这以二维形式表示：

用户空闲状态： active 或 idle：用户在一段时间内与用户代理互动或未与用户代理互动。
屏幕空闲状态： locked 或 unlocked：系统具有有效的屏幕锁定（例如屏保），可防止与用户代理互动。

区分 active 和 idle 需要启发式方法，而这种方法可能因用户、用户代理和操作系统而异。它还应是一个合理粗略的阈值（请参阅安全与权限）。

该模型有意不正式区分与特定内容（即使用 API 的标签页中的网页）、整个用户代理或操作系统之间的互动；此定义留给用户代理。

请求权限并实例化

使用 Idle Detection API 的第一步是确保已授予 'idle-detection' 权限。如果未授予权限，您需要使用 IdleDetector.requestPermission() 请求权限。请注意，调用此方法需要用户手势。

// Make sure 'idle-detection' permission is granted.
const state = await IdleDetector.requestPermission();
if (state !== 'granted') {
  // Need to request permission first.
  return console.log('Idle detection permission not granted.');
}

第二步是实例化 IdleDetector。最小 threshold 为 60,000 毫秒（1 分钟）。最后，您可以通过调用 IdleDetector 的 start() 方法来启动空闲检测。它接受一个对象作为参数，该对象包含以毫秒为单位的空闲时间 threshold 和一个可选的 signal（包含 AbortSignal 以中止空闲检测）。

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

  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: 60000,
    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);
}

停止空闲检测

您可以调用 AbortController 的 abort() 方法来中止空闲检测。

controller.abort();
console.log('IdleDetector is stopped.');

开发者工具支持

您可以在开发者工具中模拟空闲事件，而无需实际处于空闲状态。在开发者工具中，打开传感器标签页，然后找到模拟空闲检测器状态。您可以在视频中看到各种选项。

在开发者工具中模拟空闲检测器状态。

Puppeteer 支持

从 Puppeteer 版本 5.3.1 开始，您可以模拟各种空闲状态，以通过编程方式测试 Web 应用的行为会发生哪些变化。

演示

您可以通过临时画布演示来了解 Idle Detection API 的实际应用，该演示会在 60 秒无活动后清除其内容。您可以想象一下，在百货商店中部署这种设备，让孩子们在上面涂鸦。

Ephemeral Canvas 演示

Polyfill

空闲检测 API 的某些方面可以进行 Polyfill，并且存在 idle.ts 等空闲检测库，但这些方法仅限于 Web 应用自身的内容区域：在 Web 应用上下文中运行的库需要以高昂的代价轮询输入事件或监听可见性变化。不过，更严格地说，库无法在用户离开其内容区域时（例如，当用户位于其他标签页或完全退出计算机时）判断用户是否处于空闲状态。

安全与权限

Chrome 团队在设计和实现 Idle Detection API 时，遵循了控制对强大的 Web 平台功能的访问权限中定义的核心原则，包括用户控制、透明度和人体工程学。使用此 API 的能力受 'idle-detection' 权限控制。为了使用该 API，应用还必须在顶级安全上下文中运行。

用户控制和隐私权

我们一直希望防止恶意方滥用新 API。看似独立的网站实际上由同一实体控制，它们可能会获取用户空闲信息并将这些数据相关联，以识别不同来源的唯一用户。为了缓解此类攻击，Idle Detection API 限制了报告的空闲事件的精细度。

反馈

API 是否存在未按预期运行的情况？或者，是否有缺少的方法或属性需要您来实现自己的想法？对安全模型有疑问或意见？在相应的 GitHub 代码库中提交规范问题，或在现有问题中添加您的想法。

报告实现方面的问题

您是否发现 Chrome 的实现存在 bug？或者，实现是否与规范不同？在 new.crbug.com 上提交 bug。请务必尽可能详细地说明问题，提供简单的重现说明，并在组件框中输入 Blink>Input。

显示对 API 的支持

您是否打算使用 Idle Detection API？您的公开支持有助于 Chrome 团队确定功能优先级，并向其他浏览器供应商展示支持这些功能的重要性。

在 WICG Discourse 帖子中分享您打算如何使用该功能。
使用 #IdleDetection 主题标签向 @ChromiumDev 发送推文，告诉我们您在何处以及如何使用该功能。

实用链接

公开解说员
草稿规范
Idle Detection API 演示 | Idle Detection API 演示源代码
跟踪 bug
ChromeStatus.com 条目
Blink 组件：Blink>Input

致谢

Idle Detection API 由 Sam Goto 实现。开发者工具支持由 Maksim Sadym 添加。感谢 Joe Medley、Kayce Basques 和 Reilly Grant 的审核。