PWA Wake Lock 螢幕長亮實作 實作 API 防止裝置進入休眠以優化閱讀體驗

什麼是 Screen Wake Lock API？

Screen Wake Lock API (螢幕喚醒鎖 API) 是一種 Web API，允許 Progressive Web App (PWA) 在特定情境下請求防止裝置的螢幕變暗或關閉（熄滅）。這項技術對於需要使用者持續關注螢幕且無法頻繁操作裝置的場景至關重要，例如：閱讀電子食譜、掃描 QR Code 票證、投影片演示或車內導航。透過 navigator.wakeLock.request() 方法，開發者能暫時覆蓋系統的省電設定，確保內容始終可見，從而大幅提升應用程式的實用性與使用者滿意度。

什麼是喚醒鎖 (Screen Wake Lock API)?

喚醒鎖 (Screen Wake Lock API) 讓 App 不會因為省電設定而關閉螢幕，透過這樣的設計 App 有了更多的彈性。舉例來說:

• 食譜的 App 就會需要在烹煮的過程中持續顯示
• QR code 票證應該要在被掃描後螢幕才能被關閉
• 投影片展示過程中螢幕應該維持開啟

怎麼使用喚醒鎖 (Screen Wake Lock API)

使用上也沒有特別複雜，步驟如下：

1. 首先看是否支援，有存在這個 API 就代表支援，支援度可參考 MDN
2. 透過 wakeLock.request() 去拿回並啟動喚醒鎖
3. 透過喚醒鎖的 released 狀態去偵測是否啟動
4. 透過 wakeLock.release() 去釋放喚醒鎖

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

// 1. 首先看是否支援，有存在這個 API 就代表支援
if ("wakeLock" in navigator) {
  let wakeLock = null;
  const requestWakeLock = async () => {
    try {
      // 2. 透過 wakeLock.request() 去啟動喚醒鎖
      wakeLock = await navigator.wakeLock.request();
      // 3. 透過 released 這個狀態去偵測是否啟動
      wakeLock.addEventListener("release", () => {
        console.log("Screen Wake Lock released:", wakeLock.released);
      });
      console.log("Screen Wake Lock is active!");
    } catch (err) {
      console.error(`${err.name}, ${err.message}`);
    }
  };

  // 啟動喚醒鎖
  await requestWakeLock();

  // 五秒後自動釋放範例
  window.setTimeout(() => {
    if (wakeLock !== null) {
      wakeLock.release();
      wakeLock = null;
    }
  }, 5000);
}

Demo 的站台: https://wake-lock-demo.glitch.me/

喚醒鎖個案研討：Betty Crocker

Betty Crocker 是美國烹飪指導和食譜開發的一個網站，MAU 超過 1200 萬。對於食譜 App 的用戶來說，會希望在烹飪的過程中螢幕可以維持長亮。在導入喚醒鎖後，他們甚至不再維護雙平台的原生 App。

在導入過程中，技術團隊曾嘗試實作「一小時無活動後自動禁用」，但最終選擇在所有食譜頁面加入一個手動的「切換開關」。

BettyCrocker.com 在導入喚醒鎖後得到以下結果：

• 在支援 API 的用戶中，3.5% 的用戶立即啟用了該功能，位居前 5 名常用操作。
• 啟用喚醒鎖的用戶，其 Session 持續時間比未啟用的用戶長 3.1 倍。
• 跳出率比未使用功能的用戶低 50%。
• 購買意向指標比平均高出約 300%。

對 Betty Crocker 來說，加入了這個功能最大的幫助就是直接找出了最關鍵的消費者。

FAQ：PWA 喚醒鎖常見問題

Q1：螢幕喚醒鎖會導致裝置沒電嗎？

A：會。 維持螢幕長亮是耗電的主要原因之一。因此，強烈建議只在「必要時」請求喚醒鎖，並在使用者離開相關頁面或完成任務後，主動呼叫 release() 釋放權限。

Q2：如果使用者切換到其他分頁，喚醒鎖會失效嗎？

A：會。 為了安全與省電，當 PWA 被最小化或切換到背景分頁時，瀏覽器會自動釋放喚醒鎖。如果使用者重新回到該頁面，您通常需要重新呼叫 request()（建議配合 visibilitychange 事件處理）。

Q3：這項 API 可以在 HTTP 環境下運作嗎？

A：不可以。如同大多數涉及硬體控制的 Web API，Screen Wake Lock API 嚴格要求必須在 HTTPS 安全連線下才能運作。

掌握了 Screen Wake Lock API，您就能為 PWA 提供更貼近生活場景的貼心功能。持續優化使用者體驗，讓 Web App 在關鍵時刻絕不「斷電」！

• ← 上一篇
• 下一篇 →