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

me
林彥成
2021-09-20 | 1 min.
文章目錄
  1. 1. 什麼是喚醒鎖 (Screen Wake Lock API)?
  2. 2. 怎麼使用喚醒鎖 (Screen Wake Lock API)
  3. 3. 喚醒鎖個案研討

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

// 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 來說加入了這個功能最大的幫助就是直接找出了最關鍵的消費者。


喜歡這篇文章,請幫忙拍拍手喔 🤣

share