Sling Academy
Home/JavaScript/Maintain Active Displays for Kiosks with the JavaScript Screen Wake Lock API

Maintain Active Displays for Kiosks with the JavaScript Screen Wake Lock API

Last updated: December 13, 2024

When developing applications for kiosks, digital signage, or information displays, it’s essential to maintain a consistent visual output without screen dimming or locking. The JavaScript Screen Wake Lock API provides a mechanism to prevent these behaviors, ensuring the user sees content uninterrupted.

The Wake Lock API spec is still in development but has gained considerable support in modern browsers. This means you can programmatically request the screen to remain active, similar to how mobile apps handle screen inactivity. In this article, we’ll explore how you can use the Wake Lock API to manage display activity in web applications.

Understanding the Wake Lock API

The Wake Lock API allows developers to request a wake lock, which can be of different types. However, the most commonly used type, and the one we'll focus on, is the “screen” wake lock. The intention is simple: prevent the device from turning off the display while your web application is active.

Using the Screen Wake Lock API

Check for Browser Support

First, ensure that the current browser supports the Wake Lock API. You can do this by checking if navigator.wakeLock is available.

if ('wakeLock' in navigator) {
  console.log('Wake Lock API is supported.');
} else {
  console.log('Wake Lock API not supported.');
}

Request a Screen Wake Lock

To request a wake lock, you should call the request method on the wake lock object. This method returns a promise that resolves with a WakeLockSentinel object.

let wakeLock = null;

async function requestWakeLock() {
  try {
    wakeLock = await navigator.wakeLock.request('screen');
    console.log('Screen Wake Lock acquired.');
  } catch (err) {
    console.error(`${err.name}, ${err.message}`);
  }
}

Calling this function should prevent the monitor from dimming or going to sleep, making it ideal for kiosks or information displays where the content must always be visible.

Release the Wake Lock

The wake lock should be released when no longer needed to conserve resources. This can be easily handled using the release method of the WakeLockSentinel.

async function releaseWakeLock() {
  if (wakeLock !== null) {
    await wakeLock.release();
    wakeLock = null;
    console.log('Screen Wake Lock released.');
  }
}

Handling Wake Lock Sentinels

The WakeLockSentinel exposes several events, such as release, that you should handle gracefully to ensure the lock's state changes properly reflect the user’s expectations.

wakeLock.addEventListener('release', () => {
  // Handle release event
  console.log('Wake Lock was released automatically.');
});

Practical Considerations

Some considerations to keep in mind while using the Screen Wake Lock API include:

  • Screen wake locks can be automatically released by the browser under certain conditions, like low system resources or when the user manually turns off the screen.
  • Always offer users indicators and controls to know the wake lock state in your application, allowing them to understand why the screen remains active.
  • Regularly check the active status of the wake lock, especially after user interaction or when system focus changes.

Polyfill and Future Support

For environments where the Wake Lock API is not yet supported, polyfills can help emulate its behavior, albeit with some limitations due to underlying system constraints. We anticipate that as the specification and browser support mature, this solution will become even more robust, making it an invaluable tool for developers catering kiosks and persistent display applications.

In summary, leveraging the Screen Wake Lock API can ensure your web applications perform efficiently and maintain a seamless user experience even in demanding kiosk environments. Experiment with this API to see how it fits within your application’s needs while remaining alert for browser support updates.

Next Article: Select Text and Elements Using the Selection API in JavaScript

Previous Article: Enhance Long-Reading or Monitoring Sessions via JavaScript Wake Lock

Series: Web APIs – JavaScript Tutorials

JavaScript

You May Also Like

  • Handle Zoom and Scroll with the Visual Viewport API in JavaScript
  • Improve Security Posture Using JavaScript Trusted Types
  • Allow Seamless Device Switching Using JavaScript Remote Playback
  • Update Content Proactively with the JavaScript Push API
  • Simplify Tooltip and Dropdown Creation via JavaScript Popover API
  • Improve User Experience Through Performance Metrics in JavaScript
  • Coordinate Workers Using Channel Messaging in JavaScript
  • Exchange Data Between Iframes Using Channel Messaging in JavaScript
  • Manipulating Time Zones in JavaScript Without Libraries
  • Solving Simple Algebraic Equations Using JavaScript Math Functions
  • Emulating Traditional OOP Constructs with JavaScript Classes
  • Smoothing Out User Flows: Focus Management Techniques in JavaScript
  • Creating Dynamic Timers and Counters with JavaScript
  • Implement Old-School Data Fetching Using JavaScript XMLHttpRequest
  • Load Dynamic Content Without Reloading via XMLHttpRequest in JavaScript
  • Manage Error Handling and Timeouts Using XMLHttpRequest in JavaScript
  • Handle XML and JSON Responses via JavaScript XMLHttpRequest
  • Make AJAX Requests with XMLHttpRequest in JavaScript
  • Customize Subtitle Styling Using JavaScript WebVTT Integration