Progressive Web App 唤醒锁: 维持萤幕长亮的方法 (16)

什麽是唤醒锁 (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 来说加入了这个功能最大的帮助就是直接找出了最关键的消费者。