Screen Wake Lock API 屏幕唤醒锁

Screen Wake Lock API：navigator.wakeLock.request('screen')获取唤醒锁防锁屏、WakeLockSentinel.release()释放、visibilitychange处理锁自动释放后重新获取 · 难度：入门 · +10XP

Screen Wake Lock API —— 防止屏幕自动熄灭

用户在阅读长文章或看菜谱时，手机屏幕突然熄灭了——这体验很糟糕。Wake Lock API让网页可以请求保持屏幕常亮。

基本用法

let wakeLock = null;
async function keepScreenOn() {
  try {
    wakeLock = await navigator.wakeLock.request('screen');
    wakeLock.addEventListener('release', () => {
      console.log('屏幕锁被释放了');
    });
  } catch (err) {
    console.log('获取屏幕锁失败：', err);
  }
}
// 释放（切到后台时会自动释放，切回来需重新请求）
await wakeLock?.release();

动手练习

1. 基础练习：做一个"阅读模式"按钮——点击后保持屏幕常亮。
2. 进阶应用：监听visibilitychange事件，页面可见时重新获取Wake Lock。
3. 项目实战：在食谱/教程等需要长时间阅读的页面中自动请求Wake Lock。