周末給自家的在線學習項目做體驗巡檢，最大痛點不是功能，而是——看著看著屏幕就黑了。手又沒動、系統就當你“離開”。

解決它不需要黑魔法：用瀏覽器原生的 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();
  }
});

• 頁面生命周期：在 pagehide/beforeunload 及時釋放，避免殘留狀態。

什么時候會失敗？怎么優雅降級？

常見失敗原因：

• 省電/低電量模式
• 用戶或系統策略禁用
• 頁面非 HTTPS（本地 localhost 例外）
• 標簽頁不在前臺

降級建議：

• 特性檢測 + 明確提示（如“請保持應用在前臺以防屏幕熄滅”）
• 允許用戶手動開啟/關閉常亮（別強行一直亮）
• 結合業務交互：閱讀、看菜譜、演示、考試、健身計時、直播監看等長時間無操作場景再開啟

瀏覽器支持 & 環境要求

• 現代瀏覽器基本齊了（移動端也很給力）；
• HTTPS 必需（開發時用 localhost 可行）；
• 一律用特性檢測守住邊界，避免“想當然”的斷言。

小貼士：PWA/全屏模式下體驗通常更穩，提示用戶“請保持應用在前臺”。

一分鐘接入清單

• [ ] 用 isWakeLockSupported() 做特性檢測
• [ ] 提供一個切換按鈕（開 → 申請鎖；關 → 釋放鎖）
• [ ] 監聽 visibilitychange & 可選的 screen.orientation，自動恢復
• [ ] 統一處理 'release' 事件，同步 UI
• [ ] 對失敗做用戶可理解的提示（低電量/省電/策略）
• [ ] 全站/頁面啟用 HTTPS

結語

你的用戶在哪些場景需要“別熄屏”？ 菜譜、教程、文檔閱讀、健身計時、直播監看、在線考試、電子票檢票……一行 API，把“每 3 分鐘被打斷一次”的痛點從體驗里徹底剔除。

周末就把它加上吧。等你分享實踐心得與坑點，我們一起把細節打磨到爽！