Keep the Screen Awake with JavaScript: The Screen Wake Lock API


Some web applications are designed to stay visible for a long time.

Think about a workout timer, a cooking recipe, a presentation, a monitoring dashboard, or a web application being used as a control panel.

There is one small problem: if the user doesn't interact with the device for a while, the operating system may dim or turn off the screen.

Modern browsers provide a JavaScript API specifically designed for this situation:

the Screen Wake Lock API.


What does the Screen Wake Lock API do?

The Screen Wake Lock API allows a web page to ask the browser to prevent the device's display from automatically turning off because of inactivity.

The main JavaScript API is available through navigator.wakeLock.

When the application requests a screen wake lock and the browser accepts the request, the display can remain active while the page is being used.

This is especially useful for applications where the user needs to read or monitor information without constantly touching the device.

A minimal JavaScript example

At its simplest, requesting a screen wake lock requires only a few lines of JavaScript: 

if ("wakeLock" in navigator) {
  const wakeLock =
    await navigator.wakeLock.request("screen");
}

The call to navigator.wakeLock.request("screen") returns a WakeLockSentinel when the request succeeds.

When the application no longer needs to keep the display active, the wake lock can be released: 

await wakeLock.release();

A real application will normally add some additional logic around these two operations, such as updating the interface, handling errors and requesting the lock again when the page becomes visible.

The complete implementation is available in the CodePen example later in this article.

The user should remain in control

Keeping the screen permanently awake is not something a web application should do without a good reason.

The screen is one of the components that consumes the most power on a mobile device, so preventing it from sleeping can have a noticeable effect on battery life.

A good implementation should therefore make the feature explicit.

For example, an application can provide a button such as:

Keep screen awake

and allow the user to disable the feature again whenever it is no longer needed.

This is the approach used in the demo associated with this article.

The wake lock is not permanent

One important thing to understand is that a wake lock should not be considered permanent.

The browser may release it automatically under certain conditions.

A common example happens when the user switches to another browser tab or moves the application into the background.

When the page becomes visible again, the application may need to request the wake lock again if the user still wants the screen to remain active.

JavaScript can detect these changes through the Page Visibility API, making it possible to coordinate the two browser features.

Listening for lock changes

The object returned when a wake lock is acquired can also notify the application when the lock has been released.

That allows the interface to stay synchronized with the real state of the browser.

For example, the application can change its status from:

Wake lock is active

back to:

Wake lock is not active

if the browser releases the lock.

This is preferable to assuming that the lock will remain active forever after the initial request.

Where could this API be useful?

The Screen Wake Lock API is relatively small, but there are many situations where it can improve a web application.

  • workout and interval timers
  • cooking and recipe applications
  • presentation tools
  • dashboards displayed on tablets
  • monitoring interfaces
  • navigation applications
  • kiosk-style PWAs
  • applications showing instructions while the user's hands are busy

A Progressive Web App can particularly benefit from this API because it can make the application behave a little more like a native tool when it is being used for a dedicated task.

Try the complete example

I created a small vanilla JavaScript example that demonstrates the complete flow.

The demo lets you activate and release the wake lock, displays its current state, handles browsers that don't support the API, and deals with the page becoming visible again after switching tabs.

Screen Wake Lock API — JavaScript Demo

Open the complete example and source code on CodePen.

View the demo on CodePen →

Browser support and secure contexts

Like several modern browser APIs, Screen Wake Lock is designed to work in a secure context.

For a website published on the Internet, that normally means the page must be served through HTTPS.

During development, browsers also consider localhost a secure context, so the API can be tested using a local development server.

It is also a good idea to check whether navigator.wakeLock exists before trying to use the feature, so that the application can provide a graceful fallback on unsupported browsers.

Final thought

The Screen Wake Lock API is another example of how modern browsers increasingly provide functionality that once required native applications or platform-specific solutions.

The API itself is very small.

The more interesting part is designing the behavior around it correctly: letting the user control the feature, responding when the lock is released, handling changes in page visibility, and avoiding unnecessary battery usage.

If you're interested in other lesser-known browser APIs, you may also like:

Keep Multiple Browser Tabs in Sync with JavaScript

Important: the demo code must be executed through a web server in order to properly test the Screen Wake Lock API. When testing locally, serve the files through localhost rather than simply opening the HTML file from the filesystem. In production, the page should be served through HTTPS.

Comments

Post a Comment

Popular posts from this blog

Building a Linear Regression PWA with React

Image
  From a CSV file to an interactive chart, entirely in the browser Linear regression is one of the simplest statistical techniques, but it is also a useful example of how data processing, mathematics and visualization can be combined in a modern web application. In this project, I built a Progressive Web App with React that allows users to upload a CSV file containing pairs of X and Y values. The application processes the data, calculates a linear regression model, displays the resulting equation and plots both the original observations and the regression line. The technology stack The application was created with React and Vite. A few focused libraries handle the main features: Papa Parse   reads and processes the uploaded CSV file. Chart.js   and   react-chartjs-2   display the dataset and regression line. KaTeX   renders the regression equation in mathematical notation. vite-plugin-pwa   adds the web app manifest, service worker and installable P...
Read more

Building AI Prompt Lab with Java 21, Spring Boot and React 19

Image
AI Prompt Lab is a full-stack application I built around a simple idea: managing reusable AI prompts should feel like working with any other structured application asset, rather than keeping them scattered across notes, text files or chat histories. The project combines Java 21, Spring Boot, React 19, TypeScript, PostgreSQL and OpenRouter in a compact architecture that covers the main concerns of a modern web application: authentication, authorization, persistence, external API integration and management of sensitive configuration. I deliberately kept the system relatively simple. The goal was not to introduce architectural patterns for their own sake, but to build a clean application where each technology has a clear responsibility. The project AI Prompt Lab provides an authenticated workspace where users can create, update, organize and reuse prompts for generative AI models. Each user has an independent prompt collection and can configure ...
Read more