DEV Community

Cover image for Staying Alive: The Screen Wake Lock API
Mads Stoumann
Mads Stoumann

Posted on

Staying Alive: The Screen Wake Lock API

Friday night I was cooking a delicious vegetarian bolognese — but was annoyed that my iPhone kept dimming the screen, and soon after locking the screen. I know that I can change the "time-to-lock" (or whatever it's called!?) in Settings, but wouldn't it be smarter, if we could tell a webpage to "stay alive"?

The Screen Wake Lock API does exactly that — but, at the moment, only in Chrome.

To test it, I used Chrome on my MacBook.

First, I set the Turn display off after to 1 min:

Battery Settings BigSur

Then I added a checkbox for turning on/off the Wake Lock API. The checkbox is hidden and it's label shown as an icon — the crossed-out, grey eye at the top right corner:


Then, when pressed, the icon changes to an open, green eye:


The JavaScript-code for toggling the Screen Wake Lock is pretty straight-forward:

const wakeLockToggle = document.querySelector('[data-wake-lock] > input');
if (wakeLockToggle && ('wakeLock' in navigator)) {
  let wakeLock = null;
  const wakeLockEnable = async () => { 
    try {
      wakeLock = await navigator.wakeLock.request('screen');
    } catch (err) {
      console.error(`${}, ${err.message}`);
  wakeLockToggle.addEventListener('click', () => {
    if (wakeLockToggle.checked) {
    else {
      .then(() => {
        wakeLock = null;
Enter fullscreen mode Exit fullscreen mode

Next, I left the MacBook open, touching nothing.

As predicted, it dimmed the screen after one minute. Then I turned on the Screen Wake Lock — and after 3 minutes the screen hadn't dimmed. Hooray!


Unfortunately, Codepen prevents the Screen Wake Lock API from loading due to a feature policy, but I've uploaded a demo here!

Bonus: Structured Markup

Using Google's Rich Snippets is a SEO bonus, so I've added it to the demo-recipe. Using Google's Rich Result Testing Tool, you can preview what Google sees:

Rich Snippet



I used CSS Logical Properties for some of the styles, including border-block-start-width, padding-inline-start and margin-block-end.

If you inspect the demo-markup, change ltr to rtl at the top of the document:

<html lang="en-US" dir="ltr">
Enter fullscreen mode Exit fullscreen mode

I can only encourage sites with recipes to embrace the Screen Wake Lock API!

Thanks for reading!

Top comments (1)

mattmarquise profile image
Matthew Marquise

This is brilliant! Great post, keep writing!