有些应用如食谱、地图等，用户并不会频繁与其交互，但偶尔会查看屏幕内容。此时，用户通常不希望屏幕在几分钟后自动进入休眠状态。
以往，用户可能需要每隔几分钟点击一次屏幕，以重置即将进入休眠的计时。而现在，浏览器提供了 Screen Wake Lock API，可以帮助我们有效防止屏幕息屏。
使用起来非常简单，核心就俩方法：
navigator.wakeLock.request('screen') 添加唤醒锁，保持屏幕一直处于唤醒状态wakeLock.release() 释放唤醒锁看个完整例子：
// 用一个变量存住 WakeLock 实例，方便后续操作
let wakeLock = null;
// 请求锁屏
async function keepScreenAlive() {
try {
// 这行代码就是 Say: "浏览器，给我把屏幕锁住！让它一直处于唤醒/亮着状态"
wakeLock = await navigator.wakeLock.request('screen');
console.log('✅ 屏幕唤醒锁已激活，可以放心浪了');
// 建议监听 release 事件，知道锁什么时候没的（比如被系统自动释放）
wakeLock.addEventListener('release', () => {
console.log('⚠️ 屏幕唤醒锁已释放，屏幕可能马上要睡了');
wakeLock = null; // 记得置空，防止内存泄露
});
} catch (err) {
// 错误处理很重要！比如用户拒绝权限，或者浏览器压根不支持
console.error(`🚨 请求失败: ${err.name}, ${err.message}`);
}
}
// 手动解锁（比如用户点了个“允许息屏”的按钮）
function letScreenSleep() {
if (wakeLock !== null) {
wakeLock.release();
wakeLock = null;
console.log('🛑 已手动释放锁，屏幕可以睡了');
}
}
需要注意的是，当页面处于不可见状态时——例如 用户切换标签页、最小化浏览器窗口 或 锁定设备屏幕，这些情况浏览器会自动释放唤醒锁，允许屏幕正常息屏。
如果浏览器窗口保持在前台打开，而其他应用以全屏方式覆盖在浏览器之上，此时不处于页面不可见状态，唤醒锁并不会被自动释放，仍然保持生效状态。
如果应用需要在前台持续加唤醒锁，就得监听页面可见性变化，等页面从不可见状态切回可见状态时，重新把锁给续上。
// 监听页面是显示还是隐藏
document.addEventListener('visibilitychange', async () => {
// 如果之前有锁，并且页面又变可见了，就重新请求
if (wakeLock === null && document.visibilityState === 'visible') {
console.log('👀 用户回来了，赶紧重新把屏幕锁住！');
await keepScreenAlive();
}
});
↶ 返回首页 ↶