Progressive Web App 喚醒鎖 維持螢幕長亮的方法

什麼是喚醒鎖 (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

// 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 released:", wakeLock.released);
    } catch (err) {
      console.error(`${err.name}, ${err.message}`);
    }
  };

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

  // 五秒後釋放
  window.setTimeout(() => {
    wakeLock.release();
    wakeLock = null;
  }, 5000);
}

Demo 的站台:

https://wake-lock-demo.glitch.me/

喚醒鎖個案研討

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

在導入喚醒鎖的過程中，技術團隊也嘗試實作一小時內沒有任何活動後禁用喚醒鎖的功能。但最終選擇是在網站上的所有食譜頁面上加入了切換開關。

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

• 在瀏覽器支援 Wake Lock API 的所有用戶中，3.5% 的用戶立即啟用了該功能，為前 5 名操作
• 啟用喚醒鎖定的用戶的 session 持續時間比未啟用的用戶長 3.1 倍
• 啟用喚醒鎖定的用戶的跳出率比未使用喚醒鎖定功能的用戶低 50%
• 與所有用戶相比，喚醒鎖定用戶的購買意向指標高出約 300%

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

• ← 上一篇
• 下一篇 →