使用 Idle Detection API 了解用户何时未主动使用设备。
什么是空闲检测 API？
当用户处于空闲状态时，Idle Detection API 会向开发者发送通知，告知他们未 使用键盘、鼠标、屏幕、激活屏幕保护程序、锁定屏幕、 或移动到其他屏幕开发者定义的阈值会触发通知。
Idle Detection API 建议的用例
可以使用此 API 的网站示例包括：
- 聊天应用或在线社交网站可以使用此 API 让用户知道： 其联系人目前仍可联系。
- 公开提供的自助服务终端应用（例如在博物馆中）可以使用此 API 返回“首页” 在无人与自助服务终端互动的情况下查看
- 需要高昂计算费用的应用，例如绘制图表、 可以将这些计算范围限定在用户与其设备互动的时刻。
当前状态
| 步骤 | 状态 |
|---|---|
| 1. 创建铺垫消息 | 完成 |
| 2. 创建规范的初始草稿 | 完成 |
| 3. 收集反馈和对设计进行迭代 | 进行中 |
| 4. 源试用 | 已完成 |
| 5. 发布 | Chromium 94 |
如何使用 Idle Detection API
功能检测
如需检查是否支持 Idle Detection API，请使用以下命令：
if ('IdleDetector' in window) {
// Idle Detector API supported
}
Idle Detection API 概念
Idle Detection API 假定用户与 API 之间存在一定程度的互动。 用户代理（即浏览器）和所用设备的操作系统。 这以以下两个维度表示：
- 用户空闲状态：
active或idle：用户拥有或没有 已与用户代理互动了一段时间。 - 屏幕空闲状态：
locked或unlocked：系统设置了有效的屏幕锁定（如屏保），阻止了 与用户代理进行的互动。
区分 active 与 idle 需要使用的启发法可能因用户代理、用户代理和
和操作系统它还应该是一个合理的粗略阈值
（请参阅安全与权限）。
模型有意不正式区分与特定内容的互动 （即标签页中使用 API 的网页）、整个用户代理或操作系统； 则由用户代理决定。
使用 Idle Detection 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.');
开发者工具支持
从 Chromium 94 开始，您可以在开发者工具中模拟空闲事件，而不会实际处于空闲状态。 在开发者工具中，打开传感器标签页，然后查找模拟空闲检测器状态。 您可以在下面的视频中看到各种选项。
<ph type="x-smartling-placeholder">Puppeteer 支持
从 Puppeteer 5.3.1 版开始，您可以 能够模拟各种空闲状态 以程序化方式测试 Web 应用的行为如何变化。
演示
您可以通过临时画布演示了解 Idle Detection API 的实际应用情况 内容。可以想象成，部署在某个部门 供儿童涂鸦的商店
Polyfilling
Idle Detection API 的某些方面可执行 polyfill 操作 以及诸如 idle.ts 之类的空闲检测库， 但这些方法受限于 Web 应用自身的内容领域： 在 Web 应用的上下文中运行的库 需要代价高昂的轮询输入事件或监听可见性变化。 然而，更为严格的限制是，库现在无法获知用户何时进入空闲状态 在内容区域之外（例如，当用户位于其他标签页时） 或完全退出计算机的用户）。
安全与权限
Chrome 团队根据核心原则设计和实施了 Idle Detection API
控制对强大的网络平台功能的访问权限
包括用户控制、透明度和人体工程学。
此 API 的使用由
'idle-detection' 权限。
要使用该 API，应用还必须在
顶级安全上下文。
用户控制和隐私
我们始终想要防止恶意行为者滥用新的 API。看似独立的网站 但实际上由同一实体控制，可能会获取用户空闲信息和 关联数据以跨源识别唯一身份用户。为了缓解此类攻击 Idle Detection API 会限制所报告空闲事件的粒度。
反馈
Chrome 团队希望了解您使用 Idle Detection API 的体验。
向我们介绍 API 设计
API 是否有什么无法按预期运行？或者是否缺少方法 需要哪些资源或属性来实现您的想法？ 对安全模型有疑问或意见？ 在相应的 GitHub 代码库上提交规范问题， 或添加您对现有问题的看法。
报告实现存在的问题
您在 Chrome 的实现过程中是否发现了错误？或者，实现是否与规范不同？
在 new.crbug.com 上提交 bug。请务必提供尽可能多的细节信息
简单的重现说明，并在组件框中输入 Blink>Input。
Glitch 非常适用于分享轻松快速的重现问题。
表示对 API 的支持
您是否计划使用 Idle Detection API？您的公开支持可帮助 Chrome 团队 确定功能的优先级，并向其他浏览器供应商展示支持这些功能的重要性。
- 请在 WICG Discourse 会话中说明您打算如何使用它。
- 使用 # 标签向 @ChromiumDev 发送推文
#IdleDetection并告诉我们您使用它的地点和方式。
实用链接
致谢
Idle Detection API 由 Sam Goto 实现。 Maksim Sadym 添加了对开发者工具的支持。 感谢 Joe Medley Kayce Basques 和 Reilly Grant 对本文的评价。 主打图片由 Fernando Hernandez 制作， 不启动。