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

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

防止屏幕休眠或變暗

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

let screenLock;


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

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

我們將代碼封裝在 try-catch 中，因?yàn)槿绻鳈C(jī)設(shè)備處于省電模式、電池電量不足或當(dāng)前標(biāo)簽不可見，屏幕喚醒鎖請求可能會被拒絕。

釋放喚醒鎖

await screenLock.release()

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

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

請注意

該 API 僅在應(yīng)用程序通過 HTTPS 提供時(shí)可用。

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

在設(shè)備上使用此功能可確保設(shè)備不會進(jìn)入休眠狀態(tài)。