使用 JavaScript 阻止屏幕進入睡眠狀態

使用 JavaScript 阻止屏幕進入睡眠狀態

最近在 H5 端有需要保持手機屏幕常亮的需求，輾轉之下，發現了一個早在 chrome 85 中就已經支持的 Web API，不過，截止到今天發文時，Safari 仍不支持，儘管如此，在安卓端我們還是能調用這個 API 來節省設備電池電量（相對於 NoSleep.js 來說），ios 端使用 polyfill 的方式，在將來 Safari 支持該 API 後移除即可。

Wake Lock 可防止屏幕關閉、變暗或鎖定，僅適用於活動的選項卡 / 窗口，這可以防止後臺選項卡使您的設備保持喚醒狀態，也提供了函數以隨時通過代碼手動釋放。

調用 Wake Lock 之前，我們首先需要檢查當前瀏覽器中是否存在該功能。我們可以使用以下簡單函數來做到這一點。

const canWakeLock = () => 'wakeLock' in navigator;

請求喚醒鎖

下面的示例演示如何請求 WakeLockSentinel 對象。WakeLock.request 方法是基於 Promise 的，因此我們可以創建一個異步函數。

let wakeLock = null;const requestWakeLock = async ()=>{
    try {
        wakeLock = await navigator.wakeLock.request('screen');
        console.log('Wake Lock is active!');
    } catch (err) {
        console.log(`${err.name}, ${err.message}`);


}

}




requestWakeLock()

釋放喚醒鎖

下面的示例演示如何釋放以前獲取的喚醒鎖。

wakeLock.release().then(() => wakeLock = null);

偵聽喚醒鎖釋放

如因任何原因（例如離開活動窗口 / 選項卡）而釋放喚醒鎖，將出觸發 release 監聽函數。

wakeLock.addEventListener('release', () => {


console.log('Wake Lock has been released');

});

重新獲取喚醒鎖

以下代碼在文檔的可見性發生更改並釋放喚醒鎖時重新獲取喚醒鎖。

document.addEventListener('visibilitychange', async () => {
    if (wakeLock !== null && document.visibilityState === 'visible') {
        requestWakeLock()


}

});
本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/z8UlXsPdA2CkdENKvmE7iw

猜你喜歡