浏览器阻止息屏

143 阅读1分钟

需求背景

最近在做项目时需要这样一个问题,有一个任务需要在web页面上持续执行,但是在执行过程中屏幕会自动息屏,进入睡眠模式,导致任务执行中断。

然后发现在浏览器里也有阻止息屏的API WakeLock.request()

通过此API可以阻止屏幕进入睡眠模式,非常好用。

使用示例:

let wakeLock
// 开启息屏阻止
const requestWakeLock = async () => {
    wakeLock = await navigator.wakeLock.request('screen')
    console.log('息屏阻止已开启')
    
    wakeLock.addEventListener('release', () => {
      console.log('息屏阻止已关闭')
      wakeLock = null
    })
 }

// 关闭息屏阻止
const releaseWakeLock = useCallback(async () => {
    wakeLock && wakeLock.release()
}, [wakeLock])

浏览器兼容性:

image.png