IdleDetector用户空闲（发呆）检测API

什么是IdleDetector API？

Chrome 94正式发布了Idle Detection API，用于检查用户闲置时通知开发人员，指示诸如与键盘，鼠标，屏幕长时间没有交互，屏幕保护程序激活，屏幕锁定或移动到其他屏幕之类的事情。开发人员可以自定义的阈值来触发通知。

可能使用IdleDetector API 的场景如下:

1. 聊天软件或在线社交网站可以使用此API来通知用户当前是否可以联系他们的联系人
2. 例如博物馆或高铁站大厅引导屏等展示程序类的应用可以通过这个API来在没有交互后返回首页。
3. 需要复杂计算（例如绘制图表）的应用程序可以将这些计算限制在用户与其设备进行交互的时候。用程序可以将这些计算限制在用户与其设备进行交互的时候。

个人理解就是：用于即时聊天、社交媒体、在线游戏，检查用户是否活跃，可以帮助用户判断他们的联系人是否在线。事实上，聊天应用Slack和Google Chat都表达了对该特性的兴趣。

发展历程

Idle Detection API为WICG提案，由Google工程师负责，于Chrome 84开始试用，Chrome 94正式发布。目前看来这个特性也只有Chrome支持，Firefox和Safari出于保护用户隐私，都明确表示反对该特性。

Apple对于用户的隐私及安全的坚持已经成为其企业文化的一部分，影响了它很多产品和技术上的决策，这是它不依赖广告赚钱的商业模式所决定的。根据statcounter的最新数据，Chrome和Safari的市场份额分别为64%和18%，因此Safari是Chrome最大的竞争对手。有Safari这样强大的对手制约Chrome，有利于保证Web的健康发展。

当年PC版的QQ可以根据用户的鼠标键盘操作自动将状态切换至”离开”，然而移动互联网时代的聊天应用默认用户24小时在线。移动互联网给用户带来便利的同时，也绑架了大家的时间和精力，你能做到24小时不用手机吗？
​

测试遇到的坑

请把代码部署到支持https的服务器上面进行测试查看，截止2021年10月29日，本人使用本地环境和http方式访问，无效；最终发现只有通过https此属性才有效；否则提示'IdleDetector' is not defined

注：Google工程师提供了一个非常直观的Demo应用Ephemeral Canvas，我们可以用它画图，当我们60秒内不操作电脑时，所画的图形会自动被擦除掉。

详细代码

• 这里我使用的index.vue文件，方便开发
• 代码使用方法：
  • 完全copy代码，命名index.vue
  • 使用 vue serve index.vue 运行代码
  • 使用 vue build index.vue 打包代码
  • 记得把打包后的 index.html 里面的引用连接改成相对引用，即：“/" 改成 "./"（非必须，主要是看服务器部署是否是根目录）
  • 部署在能够使用 https 请求的服务器上面进行验证

<template>
  <button @click="onBtn">请点击我</button>
</template>

<script>
export default {
  name: "IndexPage",
  data() {
    return {};
  },
  mounted() {},
  methods: {
    async onBtn() {
      // 检查是否支持空闲（发呆）检测API
      if ("IdleDetector" in window) {
        // 加window是解决vue检测报错的问题
        const { IdleDetector } = window;

        // state状态值：prompt询问（默认）、denied禁止、granted允许
        // 测试步骤：chrome浏览器设置=>隐私设置和安全性=>网站设置=>近期活动：找到制定ip地址=>您的设备使用情况
        // prompt状态会进行浏览器弹框形式权限申请
        let state;
        try {
          state = await IdleDetector.requestPermission();
        } catch {
          state = await Notification.requestPermission();
        }
        if (state === "denied") {
          // 业务中需要采用弹框提示用户手动解除权限禁止状态
          return console.log("用户禁止获取设备使用情况权限!");
        }
        try {
          // 浏览器终止请求控制器对象
          const controller = new AbortController();
          const signal = controller.signal;

          // 创建空闲检测器
          const idleDetector = new IdleDetector();

          // 设置一个事件侦听器，该侦听器在空闲状态更改时触发。
          // 测试方法：从 Chromium 94 开始，您可以在 DevTools 中模拟空闲事件，而无需实际处于空闲状态。在 DevTools 中，打开Sensors选项卡并查找Emulate Idle Detector state。通过改变select的option即可在console中看到要得到的现象!
          idleDetector.addEventListener("change", () => {
            console.log("change");
            // 是否活动状态 active or idle
            const userState = idleDetector.userState; //用户在一段时间内没有和浏览器进行交互
            // 是否锁屏 locked or unlocked
            // 测试方法：一边点击按钮，一边执行锁屏动作，在解锁就能看到locked打印状态
            const screenState = idleDetector.screenState; //系统有一个活动的屏幕锁（如屏幕保护程序），禁止与浏览器交互
            console.log(`Idle change: %s, %s.`, userState, screenState);
          });

          // 启动空闲检测器。
          await idleDetector.start({
            threshold: 60000, // 最小值为60,000毫秒（1分钟）
            signal,
          });
          console.log("IdleDetector is active.");
          // 中断检测
          // controller.abort();
        } catch (err) {
          console.error("[IdleDetector] Error Name: %s", err.name);
          console.error("[IdleDetector] Error Message: %s", err.message);
        }
      } else {
        console.error(
          "当前浏览器不支持 IdleDetector 方法，请使用最新版的 Chrome 重新尝试!"
        );
      }
    },
  },
};
</script>