在現(xiàn)代 Web 應用中，尤其是涉及視頻播放、實時通信、地圖導航等長時間運行的任務時，用戶常常希望設備不要因為空閑而自動進入睡眠模式或屏幕變暗。為了解決這一問題，Web API 提供了一個名為 Wake Lock 的接口，允許開發(fā)者請求設備保持喚醒狀態(tài)。

本文將詳細介紹如何使用 Wake Lock API 來控制設備的喚醒狀態(tài)，提供示例代碼，并討論一些常見的使用場景，尤其是如何確保網(wǎng)頁隱藏或顯示時自動管理喚醒鎖。

什么是 Wake Lock API？

Wake Lock API 是一個用于防止設備進入睡眠或屏幕變暗的 Web API。通過 Wake Lock API，開發(fā)者可以請求設備保持活躍狀態(tài)，防止因為電源管理機制導致任務中斷。

目前，Wake Lock API 只支持一種類型的喚醒鎖：screen，它用于保持屏幕亮起，防止屏幕自動關閉或調(diào)暗。

使用 Wake Lock API 的前提

• 瀏覽器支持：Wake Lock API 目前在大多數(shù)現(xiàn)代瀏覽器中都已經(jīng)得到支持。

• HTTPS 環(huán)境：該 API 需要通過 HTTPS 訪問才能正常工作。

基本用例

以下是一個簡單的示例，展示了如何使用 Wake Lock API 來保持屏幕喚醒：

// 創(chuàng)建一個全局變量來存儲 WakeLock 實例
let wakeLock = null;


// 請求屏幕保持喚醒的函數(shù)
async function requestWakeLock() {
  try {
    // 請求屏幕喚醒鎖
    wakeLock = await navigator.wakeLock.request('screen');
    console.log('屏幕喚醒鎖已激活');
    
    // 監(jiān)聽喚醒鎖的釋放事件
    wakeLock.addEventListener('release', () => {
      console.log('屏幕喚醒鎖已釋放');
    });
  } catch (err) {
    console.error(`${err.name}, ${err.message}`);
  }
}


// 釋放喚醒鎖的函數(shù)
function releaseWakeLock() {
  if (wakeLock !== null) {
    wakeLock.release();
    wakeLock = null;
    console.log('屏幕喚醒鎖手動釋放');
  }
}


// 調(diào)用函數(shù)請求喚醒鎖
requestWakeLock();


// 在頁面關閉時釋放喚醒鎖
window.addEventListener('beforeunload', releaseWakeLock);

頁面可見性處理：自動管理喚醒鎖

由于當網(wǎng)頁被隱藏或切換到后臺時會自動釋放喚醒鎖，因此我們可以監(jiān)聽 visibilitychange 事件來確保網(wǎng)頁重新可見時重新獲取喚醒鎖。當頁面恢復顯示時再次請求鎖定，頁面隱藏時則釋放喚醒鎖。

// 創(chuàng)建一個全局變量來存儲 WakeLock 實例
let wakeLock = null;


// 請求屏幕保持喚醒的函數(shù)
async function requestWakeLock() {
  try {
    // 請求屏幕喚醒鎖
    wakeLock = await navigator.wakeLock.request('screen');
    console.log('屏幕喚醒鎖已激活');
    
    // 監(jiān)聽喚醒鎖的釋放事件
    wakeLock.addEventListener('release', () => {
      console.log('屏幕喚醒鎖已釋放');
    });
  } catch (err) {
    console.error(`${err.name}, ${err.message}`);
  }
}


// 釋放喚醒鎖的函數(shù)
function releaseWakeLock() {
  if (wakeLock !== null) {
    wakeLock.release();
    wakeLock = null;
    console.log('屏幕喚醒鎖手動釋放');
  }
}


// 處理頁面可見性變化
function handleVisibilityChange() {
  if (document.visibilityState === 'visible') {
    // 頁面重新可見時，重新請求喚醒鎖
    requestWakeLock();
  } else {
    // 頁面隱藏時，釋放喚醒鎖
    releaseWakeLock();
  }
}


// 監(jiān)聽頁面可見性變化事件
document.addEventListener('visibilitychange', handleVisibilityChange);


// 頁面加載時立即請求喚醒鎖
requestWakeLock();


// 在頁面關閉時釋放喚醒鎖
window.addEventListener('beforeunload', releaseWakeLock);

使用場景

Wake Lock API 在以下幾種典型場景中非常有用：

1. 視頻或音頻播放

在播放視頻或音頻的應用中，用戶希望屏幕保持亮起，以便可以隨時調(diào)整播放進度或音量。通過 Wake Lock API，在媒體播放時保持屏幕喚醒，提供更好的用戶體驗。

videoElement.addEventListener('play', requestWakeLock);
videoElement.addEventListener('pause', releaseWakeLock);

2. 實時通信應用

對于視頻通話、會議等實時通信應用，屏幕關閉會影響用戶的互動體驗。使用 Wake Lock API，可以確保設備在通話期間保持活躍，防止通話中斷。

if (isInCall) {
  requestWakeLock();
} else {
  releaseWakeLock();
}

3. 導航和地圖應用

在導航應用中，用戶通常需要長時間查看屏幕來獲取行進路線信息。使用 Wake Lock API，可以確保屏幕不會因為閑置而熄滅。

navigator.geolocation.watchPosition(() => {
  requestWakeLock();
}, () => {
  releaseWakeLock();
});

4. 游戲或全屏應用

網(wǎng)頁游戲或需要長時間用戶交互的全屏應用，也可以利用 Wake Lock API，避免游戲過程中屏幕突然熄滅。

document.addEventListener('fullscreenchange', () => {
  if (document.fullscreenElement) {
    requestWakeLock();
  } else {
    releaseWakeLock();
  }
});

錯誤處理和兼容性

雖然 Wake Lock API 提供了有用的功能，但它在某些設備上可能受到電源管理策略的限制。因此，開發(fā)者在請求喚醒鎖時應當加入錯誤處理，以確保程序的健壯性。

if ('wakeLock' in navigator) {
  requestWakeLock();
} else {
  console.error('當前瀏覽器不支持 Wake Lock API');
}

瀏覽器兼容性

iOS 版 Safari

• 16.4 (Released 2023-03-27)

• 部分支持

• 在獨立的主屏幕Web應用程序不生效。詳情請看 bug 254545.

總結

Wake Lock API 為 Web 開發(fā)者提供了控制設備喚醒狀態(tài)的能力，尤其適合那些需要保持屏幕長時間活躍的應用，如視頻播放、實時通信、導航等。通過監(jiān)聽 visibilitychange 事件，應用程序可以智能地管理喚醒鎖的狀態(tài)，在頁面可見時重新獲取鎖定，隱藏時釋放鎖定。

隨著更多瀏覽器對 Wake Lock API 的支持，它將會成為提升用戶體驗的重要工具。如果你的應用涉及到長時間的任務或需要保持屏幕亮起，建議集成這個 API 來優(yōu)化用戶體驗。