什麼是喚醒鎖 (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. 首先看是否支援，有存在這個 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 來說加入了這個功能最大的幫助就是直接找出了最關鍵的消費者。