現在所有瀏覽器都支援 Screen Wake Lock API

Thomas Steiner

發布日期：2024 年 5 月 14 日

Screen Wake Lock API 已正式在所有主要瀏覽器 (Chrome、Safari 和 Firefox) 上線。這個 API 可讓您控制裝置的螢幕喚醒行為，確保與網頁應用程式的互動不會中斷。

以下兩種用途現在可行。

流暢的簡報：API 可避免網頁版簡報或幻燈片應用程式中的螢幕調暗，讓簡報者能提供精緻專業的體驗。
食譜網站：API 可讓螢幕保持開啟狀態，因此使用者在按照烘焙食譜操作時，不必擔心手上沾滿麵糰而導致螢幕關閉。

如要進一步瞭解如何使用 API，請參閱「使用 Screen Wake Lock API 保持喚醒狀態」一文。下列程式碼片段顯示最常見的互動。

// The wake lock sentinel.
let wakeLock = null;

// Function that attempts to request a screen wake lock.
const requestWakeLock = async () => {
  try {
    wakeLock = await navigator.wakeLock.request();
    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}`);
  }
};

// Request a screen wake lock…
await requestWakeLock();
// …and release it again after 5s.
window.setTimeout(() => {
  wakeLock.release();
  wakeLock = null;
}, 5000);

普遍採用 Screen Wake Lock API 是網路開發社群的正面進展。由於這項技術的應用範圍廣泛，且廣泛獲得支援，因此您可以打造更可靠且精緻的網頁體驗，最終造福不同瀏覽器的使用者。歡慶順暢無干擾的網路環境！