Screen wake lock and battery: what a clock page actually costs you
People assume a web page can keep the screen on whenever it wants, and that doing so costs nothing. The first part is wrong, and the second part is wrong in a way that matters.
The Screen Wake Lock API only works while the page is visible. It keeps the panel lit at the cost of real battery drain. On a phone with an OLED screen, leaving a clock on overnight can mean a flat battery by morning unless the device is charging. The API is a useful tool. It is not a magic switch and it is not free.
How the Screen Wake Lock API works
The Screen Wake Lock API lets a page request that the device screen stay awake. It was introduced as a W3C specification around 2017 and gained wide support in Chromium browsers by 2020. Safari added support in version 16.4.
Before this API existed, developers played invisible, looping videos so the browser would keep the screen on. That wasted bandwidth, CPU, and battery. The API replaced those hacks with something purpose-built.
The API works through navigator.wakeLock.request() with the type set to "screen". If granted, the usual idle timeout is suspended for as long as the lock is held. The page must be visible at the moment of the request, and the document must be served over HTTPS.
Why clocks and timers need a screen wake lock
A clock or timer page is the perfect use case. Nobody touches the device while a countdown runs. The whole point is that the information is visible from across the room. Without a wake lock, the panel dims after a short timeout and the clock disappears.
The device has no way of knowing that looking at the screen is the entire point. It applies the same idle timeout it would to a page nobody is reading. The wake lock tells the operating system to hold off.
The lock is released the moment the page becomes hidden. Switching tabs, minimising the window, or locking the device all end the lock. A page that wants to hold one across an interruption must request it again when visibility returns. A well-behaved clock page treats the wake lock as an enhancement: it requests one, carries on if the request fails, and never pretends the screen will stay on.
What a screen wake lock costs your battery
The screen is the largest single power draw on most mobile devices. A lit panel dominates everything else the page itself is doing. Holding a wake lock for an hour costs far more energy than every script and animation on the page combined.
The numbers vary across devices, but the pattern is consistent: a phone kept awake overnight as a bedside clock will likely be flat by morning unless it is charging. On a laptop, the impact is smaller but still measurable. A clock page left running on a secondary monitor all day will shave meaningful time off the battery.
This is not a reason to avoid the API. It is a reason to pair it with low brightness and a dark layout. Both reduce power draw at once, and both are free to implement.
OLED burn-in and how to reduce the risk
OLED burn-in is the permanent ghost image left by static elements on a screen. It happens when pixels are held at high brightness for hundreds of hours. An always-on clock with bright white digits in the same corner is exactly the kind of content that causes it.
The risk is real but manageable. Use a dark background with dim, low-contrast digits. Keep brightness low. If the panel supports pixel shifting, enable it. Some operating systems also offer burn-in reduction features that nudge the image periodically.
A dark layout with dim digits cuts battery drain and burn-in risk at the same time. It is the single most effective thing a clock page can do.
When a screen wake lock will not work
The API has hard limits. It only prevents the screen from sleeping. It does not stop the machine suspending for other reasons, does not keep a tab running in the background, and cannot override a manual press of the power button.
Some platforms ignore the wake lock entirely. Operating system power settings may override it, especially on desktops configured for aggressive power saving. A page that requests a wake lock while hidden is simply refused.
Support is broad but not universal. Because it cannot be assumed, a clock page must treat the API as progressive enhancement. If the request fails, the page should still work. It just will not keep the screen on.
Alternatives when the wake lock is not available
When the API is unavailable or refused, the fallback is to change the operating system's screen timeout settings. On a phone, that means setting the screen to stay on while charging, or disabling the timeout entirely. On a desktop, it means adjusting the power plan.
For dedicated displays, a kiosk mode or a Raspberry Pi with a custom configuration can bypass the browser entirely. These setups run unattended for weeks and survive power cycles, but they are a different tool for a different job.
For most people, the simplest alternative is to plug the device in and adjust the OS-level timeout. It is less elegant than the API, but it works everywhere.
How to set up a clock that stays visible
Use the wake lock whenever the screen is the output and nobody is touching the device. That is the whole test: if a person would have to reach over and wake the panel to get the information they came for, the lock is doing something useful.
Pair it with a dark layout and low brightness. Use dim, low-contrast digits. Enable pixel shifting if available. Never present the wake lock as a guarantee that the screen will stay on.
| Situation | Use Wake Lock? | Notes |
|---|---|---|
| Bedside clock, charging | Yes | Dark layout, low brightness |
| Laptop second monitor | Yes | Dim digits, dark background |
| Unattended kiosk | No | Use kiosk mode or OS settings |
| Short countdown, active user | Optional | Screen already in use |
| OLED TV, long sessions | Caution | Burn-in risk, use pixel shifting |
Does the Screen Wake Lock API work on all browsers?
No. Chromium browsers and Safari 16.4+ support it. Firefox added support later than the others. Always treat it as an enhancement, not a requirement.
How much battery does a screen wake lock use?
The lock itself costs almost nothing. The panel it keeps lit costs the most power on the device. Expect meaningful drain over hours, especially on phones.
Can a wake lock stop a laptop from sleeping?
No. The API only prevents the screen from dimming. The machine can still suspend for other reasons, and OS power settings may override the lock entirely.
Does a dark clock prevent OLED burn-in?
It reduces the risk significantly. Dim, low-contrast digits on a dark background put far less stress on the panel than bright white text.
Why does a wake lock stop working when switching tabs?
The lock is tied to page visibility. The moment the page is hidden, the lock is released. This is by design to prevent background pages from keeping the screen on.
Is there a way to keep the screen on without the API?
Yes. Adjust the operating system's screen timeout settings. On phones, enable the stay-awake-while-charging option. On desktops, change the power plan. It is less precise but works everywhere.