MDN项目：Idle Detection API 详解与实战指南

什么是Idle Detection API？

Idle Detection API 是一项现代Web技术，允许开发者检测用户设备的空闲状态（包括活跃、空闲和锁定三种状态），并在状态发生变化时接收通知，而无需通过轮询方式检查状态。

核心概念与应用场景

基础概念

该API主要围绕三个关键状态展开：

1. 活跃状态（Active）：用户正在与设备交互
2. 空闲状态（Idle）：用户未与设备交互达到指定阈值时间
3. 锁定状态（Locked）：设备屏幕被锁定

典型应用场景

1. 即时通讯应用：显示联系人当前是否可用
2. 通知系统：仅在用户活跃时推送通知
3. PWA应用：在用户不使用时触发服务工作者更新
4. 资源优化：在用户空闲时执行后台任务或节省资源

API接口详解

IdleDetector 接口

这是API的核心接口，提供以下功能：

• 检测用户活动状态
• 监听状态变化事件
• 配置检测参数

主要属性和方法：

• userState：返回用户状态（active/idle）
• screenState：返回屏幕状态（unlocked/locked）
• start()：启动空闲检测
• requestPermission()：请求用户权限

实战示例

基础使用

以下代码展示了如何创建检测器并监听状态变化：

// 创建中止控制器用于停止检测
const controller = new AbortController();

// 启动按钮点击事件
startButton.addEventListener("click", async () => {
  // 1. 请求用户权限
  if ((await IdleDetector.requestPermission()) !== "granted") {
    console.error("权限被拒绝");
    return;
  }

  try {
    // 2. 创建检测器实例
    const idleDetector = new IdleDetector();
    
    // 3. 添加状态变化监听
    idleDetector.addEventListener("change", () => {
      console.log(`状态变化: 用户${idleDetector.userState}, 屏幕${idleDetector.screenState}`);
    });

    // 4. 启动检测（设置1分钟空闲阈值）
    await idleDetector.start({
      threshold: 60000,
      signal: controller.signal
    });
    
    console.log("空闲检测已激活");
  } catch (error) {
    console.error("初始化错误:", error);
  }
});

// 停止按钮点击事件
stopButton.addEventListener("click", () => {
  controller.abort();
  console.log("空闲检测已停止");
});

关键点解析

1. 权限请求：必须首先获得用户明确授权
2. 阈值设置：threshold参数定义多少毫秒无交互视为空闲
3. 错误处理：需要处理权限拒绝等常见错误
4. 资源释放：使用AbortController可以优雅停止检测

安全与隐私考虑

1. 权限模型：需要用户明确授权才能使用
2. 同源限制：仅在安全上下文（HTTPS）中可用
3. 状态限制：无法获取用户离开设备的具体信息，只能检测交互状态

浏览器兼容性

目前该API仍处于实验阶段，主要在现代浏览器中部分支持。建议在实际应用中加入特性检测：

if ('IdleDetector' in window) {
  // API可用
} else {
  // 提供备用方案
}

最佳实践建议

1. 渐进增强：为不支持API的浏览器提供备用方案
2. 明确用途：向用户解释为何需要空闲检测权限
3. 合理阈值：根据应用场景设置适当的空闲阈值
4. 及时释放：页面不可见时停止检测以节省资源

总结

Idle Detection API为Web开发者提供了原生应用级别的用户活动检测能力，使得开发更加高效、性能更优。虽然目前仍处于实验阶段，但对于需要精细化管理用户状态的Web应用来说，这是一个值得关注的重要API。