Preventing the Screen from Going to Sleep
When recording a PowerPoint presentation before, I used one computer to display the script and another to record. The script display computer would go to sleep after a few minutes, which was quite frustrating. I ended up playing a small video in picture-in-picture mode to keep the screen on.
Today, I discovered that not long ago, both Chrome and Safari browsers started supporting the Screen Wake Lock API, which keeps the display from sleeping when a web page is open.
According to my research, the well-known American cooking site Betty Crocker implemented the Screen Wake Lock API and saw a 300% increase in user purchase intent. For more details, please google it.
That was unexpected — it even boosted direct revenue!
However, this is probably only useful for specific types of websites. For example, cooking websites benefit because users need the page to stay lit while following recipes, explaining the significant revenue increase.
For traditional social media websites, the effect would likely be minimal. I’m curious how it would impact reading sites for novels…
We can discuss that later. Right now, I have a relevant use case: a project introduction page that enters presentation mode should definitely prevent the screen from sleeping.
The Screen Wake Lock API would be perfect for this scenario.
Syntax and Usage of the Screen Wake Lock API
Keeping the screen awake is easy — it only takes one line of code:
navigator.wakeLock.request('screen');
That’s it — it’s that simple.
Since keeping the screen awake is a resource-intensive operation, browsers release the wake lock if the page is minimized or if it’s not the active tab. When the user switches back to the page, the wake lock is no longer active. Therefore, additional code handling is needed.
document.addEventListener('visibilitychange', () => {
if (document.visibilityState === 'visible') {
navigator.wakeLock.request("screen")
}
});
t’s not over yet. If we only use wakeLock, it’s easy to accidentally repeat the wake lock operation during implementation. Therefore, we also need to track when the wake lock is released, as well as how to manually release the screen wake lock functionality.
This brings us to the WakeLockSentinel object. This object is the return value after executing the navigator.wakeLock.request(‘screen’) promise.
We can use then() to access it, for example:
let wakeLock = null;
navigator.wakeLock.request('screen').then(result => {
wakeLock = result;
})
You can also use the async/await syntax, for example:
let wakeLock = null;
async () => {
wakeLock = await navigator.wakeLock.request('screen');
}
Manually Release Wake Lock
To release the wake lock, you can use the wakeLock object mentioned above. Here’s an example of the code:
wakeLock.release().then(() => {
wakeLock = null;
});
Additionally, we can detect when the wake lock is released by using the release event:
wakeLock.addEventListener('release', () => {
console.log('free~~~');
});
Too Much Of A Good Thing
Screen wake lock is not without its cost. Keeping the screen always on will prevent the screensaver from starting and can shorten the display’s lifespan.
For mobile devices, the screen is usually the most power-consuming component, so blocking the screen from turning off leads to higher battery consumption. Therefore, it’s not recommended to enable the screen wake lock in non-essential scenarios.
Requirements
For this API to work, it must be used over HTTPS or in a local environment (localhost).
Compatibility
Currently, both Chrome and Safari browsers support the wake-lock feature. Firefox has enabled experimental support, and based on historical trends, it’s likely to be officially supported soon. Full support for this API is just around the corner.
