空闲检测模拟

Chrome94的最新版本中加入了空闲检测模拟，在本文中测试其使用方法

支持检测

检测浏览器是否支持空闲检测的api

if('IdleDetector' in window){
    console.log('不支持空闲检测api')
}else{
    console.log('支持空闲检测api')
}

权限申请

最新版本的chrome中需要进行权限申请后才可以使用空闲检测api，其提醒为xxx网站想要了解您何时在主动使用此设备，申请返回为Promise，可以根据用户选择进行相应的处理

// 申请权限

async function reqIdle(){
    if(await IdleDetector.requestPermission() === 'granted'){
        console.log('获得权限')
    }else{
        console.log('用户禁止权限')
    }
}

调用IdleDetector.requestPermission()有两种结果，允许为granted，禁止为denied

创建实例

调用new IdleDetector()创建一个闲时检测的实例

const idle = new IdleDetector()

事件绑定

在实例上绑定change事件

idle.addEventListener('change',()=>{
    console.log('空闲状态发生变化！')
}) // 也可以绑定idle.onchange

启动检测事件触发

绑定完事件以后并不会立刻就能够触发事件的变化，还需要手动启动检测事件的触发

// 基础
idle.start()
// 设定空闲时间的变化，为了防止被滥用，空闲时间至少需要1分钟
idle.start({
    threshold:60000
})
// 设定可终止检测
const controller = new AbortController();
const signal = controller.signal;
idle.start({
    threshold:60000,
    signal
})
// 

状态检测

idle实例提供两个成员，userState和screenState，分别代表当前用户状态和屏幕锁定状态

userState:active || idle

screenState:unlocked||locked

idle.addEventListener('change', e => {
    console.log(`[${new Date().toLocaleString()}] idle change: ${idleDetector.userState}, ${idleDetector.screenState}`);
});

异常情况

在chrome上请求此权限必须为user gesture触发，也就是浏览器不能启动就使用代码立刻进行该权限的自动请求，那么chrome在请求权限时会报错Initialization error: NotAllowedError: Failed to execute 'requestPermission' on 'IdleDetector': Must be handling a user gesture to show a permission request..。但是在控制台中手动请求权限则不会有此限制，如果使用控制台手动进行了权限请求，或者在设置中手动打开了某个网站的该权限，也可以直接进行使用而不需要再手动请求。正确的触发方法应该是为某个dom绑定点击事件，点击后在事件回调中手动触发，才能打开权限请求框。

<button id="btn" onClick="reqIdle">申请权限</button>

async function reqIdle(){
    if(await IdleDetector.requestPermission() === 'granted'){
        console.log('获得权限')
    }else{
        console.log('用户禁止权限')
    }
}

使用btn.click()这种取巧的方法也是不行的，必须是用户点击

开发者工具状态切换

空闲状态检测隶属于传感器类的api，因此在chrome控制台的Sensor/传感器面板中可控制模拟

在线实例

开始侦听后使用开发者工具修改页面的状态，那么网页也会同步的打印相关的状态

开始侦听