JavaScript阻止屏幕进入睡眠状态

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

最近在 H5 端有需要保持手机屏幕常亮的需求,辗转之下,发现了一个早在 chrome 85 中就已经支持的 Web API,不过,截止到今天发文时,Safari 仍不支持,尽管如此,在安卓端我们还是能调用这个 API 来节省设备电池电量(相对于 NoSleep.js 来说),ios 端使用 polyfill 的方式,在将来 Safari 支持该 API 后移除即可。

Wake Lock 可防止屏幕关闭、变暗或锁定,仅适用于活动的选项卡/窗口,这可以防止后台选项卡使您的设备保持唤醒状态,也提供了函数以随时通过代码手动释放。

调用 Wake Lock 之前,我们首先需要检查当前浏览器中是否存在该功能。我们可以使用以下简单函数来做到这一点。

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

请求唤醒锁

下面的示例演示如何请求 WakeLockSentinel 对象。WakeLock.request 方法是基于 Promise 的,因此我们可以创建一个异步函数。

let wakeLock = null;const requestWakeLock = async ()=>{
    try {
        wakeLock = await navigator.wakeLock.request('screen');
        console.log('Wake Lock is active!');
    } catch (err) {
        console.log(`${err.name}, ${err.message}`);
    }

}

requestWakeLock()

释放唤醒锁

下面的示例演示如何释放以前获取的唤醒锁。

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()
    }
});

「点点赞赏,手留余香」

3

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

使用声明:
1. 本站所有素材(未指定商用),仅限学习交流。
2. 会员在本站下载的VIP素材后,只拥有使用权,著作权归原作者及码云笔记网所有。
3. 原创商用和VIP素材,未经合法授权,请勿用于商业用途,会员不得以任何形式发布、传播、复制、转售该素材,否则一律封号处理。
4. 本平台织梦模板仅展示和个人非盈利用途,织梦系统商业用途请预先授权。
码云笔记 » JavaScript阻止屏幕进入睡眠状态

发表回复

IT互联网行业相关广告投放 更专业 更精准

立即查看 联系我们