WakeLockSentinel

The WakeLockSentinel interface of the Screen Wake Lock API can be used to monitor the status of the platform screen wake lock, and manually release the lock when needed.

The screen wake lock prevents device screens from dimming or locking when an application needs to keep running.

A screen wake lock is requested using the navigator.wakeLock.request() method, which returns a Promise that fulfills with a WakeLockSentinel object if the lock is granted.

An acquired screen wake lock can be released manually via the release() method, or automatically via the platform screen wake lock. The latter may occur if the document becomes inactive or loses visibility, if the device is low on power, or if the user turns on a power save mode. A released WakeLockSentinel cannot be re-used: a new sentinel must be be requested using navigator.wakeLock.request() if a new lock is needed. Releasing all WakeLockSentinel instances of a given wake lock type will cause the underlying platform wake lock to be released.

An event is fired at the WakeLockSentinel if the platform lock is released, allowing applications to configure their UI, and re-request the lock if needed.

// create a reference for the wake lock
let wakeLock = null;

// create an async function to request a wake lock
const requestWakeLock = async () => {
  try {
    wakeLock = await navigator.wakeLock.request("screen");

    // listen for our release event
    wakeLock.addEventListener("release", () => {
      // if wake lock is released alter the UI accordingly
    });
  } catch (err) {
    // if wake lock request fails - usually system related, such as battery
  }
};

wakeLockOnButton.addEventListener("click", () => {
  requestWakeLock();
});

wakeLockOffButton.addEventListener("click", () => {
  if (wakeLock !== null) {
    wakeLock.release().then(() => {
      wakeLock = null;
    });
  }
});