核心用法（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 分鐘被打斷一次”的痛點從體驗裏徹底剔除。

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