告别“自动黑屏”——一个原生 JS API 就够了_idea trea 插件提示globalthis.acquirevscodeapi = (func-优快云博客

周末给自家的在线学习项目做体验巡检，最大痛点不是功能，而是——看着看着屏幕就黑了。手又没动、系统就当你“离开”。解决它不需要黑魔法：用浏览器原生的 Screen Wake Lock API。

周末给自家的在线学习项目做体验巡检，最大痛点不是功能，而是——看着看着屏幕就黑了。手又没动、系统就当你“离开”。

解决它不需要黑魔法：用浏览器原生的 Screen Wake Lock API。

它做什么？一句话：在需要时请求“点亮锁”，锁在、屏不熄。

核心用法（3 段代码就够）

1) 能不能用？

function isWakeLockSupported() {
  return 'wakeLock' in navigator;
}

2) 申请 & 监听释放

let wakeLock = null;

async function requestWakeLock() {
  try {
    wakeLock = await navigator.wakeLock.request('screen'); // 关键
    console.log('Screen wake lock acquired');

    // 无论是你手动释放，还是系统自动释放，都会触发
    wakeLock.addEventListener('release', () => {
      console.log('Wake lock was released');
      // TODO: 更新 UI 状态（例如按钮文字）
    });
  } catch (err) {
    console.error(`${err.name}: ${err.message}`);
    // TODO: 弹提示：低电量/省电模式/权限限制 可能导致失败
  }
}

3) 主动释放

function releaseWakeLock() {
  if (wakeLock) {
    wakeLock.release();
    wakeLock = null;
  }
}

进阶心法：把“是否保持常亮”的意图写成状态变量（比如 shouldKeepAwake），让所有流程都围绕它判断，逻辑更稳。

它背后到底怎么运作？

navigator.wakeLock.request('screen') → 申请一个屏幕常亮锁。
成功后返回 WakeLockSentinel：

sentinel.released：是否已被释放

sentinel.type：锁类型（这里就是 'screen'）

'release' 事件：任何释放都会触发（你/系统都算）

系统可能会自动释放：

你切走标签页 / 最小化窗口
设备低电量/省电
你离开当前页面
部分平台的策略变化（例如用户设置了不允许常亮）

关键细节：可见性变化要“无感恢复”

标签页一切走，锁就会被放。回来要自动重申：

let shouldKeepAwake = true; // 你的业务开关

document.addEventListener('visibilitychange', async () => {
  if (document.visibilityState === 'visible' && shouldKeepAwake) {
    await requestWakeLock(); // 回到前台时尝试恢复
  } else if (document.visibilityState === 'hidden') {
    releaseWakeLock();
  }
});

再补两条常见“坑位”：

屏幕旋转（有些平台会间接触发释放）可加监听后重申：

screen.orientation?.addEventListener?.('change', () => {
  if (document.visibilityState === 'visible' && shouldKeepAwake) {
    requestWakeLock();
  }
});