IdleDetector用户空闲（发呆）检测API
什么是IdleDetector API？
Chrome 94正式发布了Idle Detection API，用于检查用户闲置时通知开发人员，指示诸如与键盘，鼠标，屏幕长时间没有交互，屏幕保护程序激活，屏幕锁定或移动到其他屏幕之类的事情。开发人员可以自定义的阈值来触发通知。
可能使用IdleDetector API 的场景如下:
- 聊天软件或在线社交网站可以使用此API来通知用户当前是否可以联系他们的联系人
- 例如博物馆或高铁站大厅引导屏等展示程序类的应用可以通过这个API来在没有交互后返回首页。
- 需要复杂计算（例如绘制图表）的应用程序可以将这些计算限制在用户与其设备进行交互的时候。用程序可以将这些计算限制在用户与其设备进行交互的时候。
个人理解就是：用于即时聊天、社交媒体、在线游戏，检查用户是否活跃，可以帮助用户判断他们的联系人是否在线。事实上，聊天应用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>
