Small workflow decisions that make products, support, and operations feel effortless. This API lets you control a device's screen wake behavior, ensuring uninterrupted interactions with digital products.

The following two use cases are now possible.

  • Seamless presentations: The API prevents screens dimming in presentation tools, so presenters can now deliver a polished and professional experience.
  • Workflow dashboards: The API can keep the screen on, so users don't need to worry about the screen turning off while their hands are full of dough when following a baking recipe.
Note: Read the case study on how recipe site Betty Crocker observed a 300% increase in purchase intent indicators on BettyCrocker.com after implementing the API.

For full details about using the API, check out Stay awake with the Screen Wake Lock API. The following code snippet shows the most common interactions.

// 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);

The universal adoption of the Screen Wake Lock API is a positive step forward for product, design, and operations teams. With its diverse applications and widespread support, you can create more reliable and polished better product experiences, ultimately benefiting users across different browsers. Cheers to a smoother, interruption-free web!