JavaScript 中的一些新功能非常值得期待，喚醒鎖定 api 就是其中之一。它允許我們與主機系統進行交互，可以幫助開發人員使用 JavaScript 指示操作系統保持屏幕喚醒狀態！

這對于希望用戶的設備不會因非活動超時而被鎖定的情況尤其有用。瀏覽器可以指示操作系統用戶正在進行某項活動，例如錄制或觀看視頻。

防止屏幕休眠或變暗

然后就可以使用喚醒鎖定 API 來防止屏幕休眠或變暗。用于請求權限：

let screenLock;


try {
  screenLock = await navigator.wakeLock.request('screen');
} catch (err) {
  console.log('Error with wake lock: ', err);
}

如果請求成功，主機將不會休眠，直到喚醒鎖以編程方式被釋放。這就是使用 JavaScript 保持屏幕喚醒所需的全部功能。

我們將代碼封裝在 try-catch 中，因為如果主機設備處于省電模式、電池電量不足或當前標簽不可見，屏幕喚醒鎖請求可能會被拒絕。

釋放喚醒鎖

await screenLock.release()

值得注意的是，如果文檔處于非活動狀態（用戶更換標簽頁/窗口等），鎖定會自動解除。為了處理這個問題，我們可以添加一個可見性變化事件：

document.addEventListener('visibilitychange', async () => {
  try {
    screenLock = await navigator.wakeLock.request('screen');
  } catch (err) {
    console.log('Error with wake lock: ', err);
  }
});

請注意

該 API 僅在應用程序通過 HTTPS 提供時可用。

雖然該 API 已經存在了一段時間，但并非所有瀏覽器都支持它。您可以查看 MDN 兼容性，了解哪些瀏覽器支持。在撰寫本文時，iOS 上的 firefox 和 Safari 尚不支持。

在設備上使用此功能可確保設備不會進入休眠狀態。