使用JavaScript阻止屏幕进入睡眠状态

通过JavaScript实现屏幕常亮功能

在H5开发场景中，为满足持续显示需求，需利用浏览器原生API实现屏幕唤醒控制。该技术在Chrome 85版本已支持，虽Safari暂未实现，但可通过安卓端直接调用，iOS端可采用polyfill方案待Safari支持后移除。

Wake Lock API可防止屏幕关闭、变暗或锁定，仅限于活跃的浏览器窗口，可有效避免后台进程占用系统资源。

实施前需验证浏览器兼容性，可使用以下函数检测支持情况：

const canWakeLock = () => 'wakeLock' in navigator

获取唤醒锁

以下示例演示如何获取Wake Lock对象：

let wakeLock = null

获取唤醒锁的异步实现

通过async/await语法实现Promise-based的唤醒锁请求：

let wakeLock = null

释放唤醒锁

调用wakeLock.release()方法可释放已获取的唤醒锁，需在释放后重置变量：

wakeLock.release().then(() => wakeLock = null)

监听唤醒锁释放事件

当唤醒锁因页面关闭等原因释放时，会触发release事件：

wakeLock.addEventListener('release', () => {
    console.log('Wake Lock has been released')
})

动态获取唤醒锁

通过文档可见性变化触发唤醒锁的重新获取：

document.addEventListener('visibilitychange', async () => {
    if (wakeLock !== null && document.visibilityState === 'visible') {
        requestWakeLock()
    }
})