A Tour of Web Capabilities

Screen Wake Lock API

Maximiliano Firtman

Maximiliano Firtman

Independent Consultant
A Tour of Web Capabilities

Check out a free preview of the full A Tour of Web Capabilities course

The "Screen Wake Lock API" Lesson is part of the full, A Tour of Web Capabilities course featured in this preview video. Here's what you'd learn in this lesson:

Max discusses the Screen Wake Lock API, which allows applications to prevent the operating system from locking the screen.


Transcript from the "Screen Wake Lock API" Lesson

>> Well, something less cool but important, screen wake lock. And this is important for our cooking application. So let's say you are on iPad, you are cooking with your iPad. What happens with the screen of your iPad after one minute, two minutes, that you're not touching it? It locks down, and I'm cooking.

I don't wanna use my finger Touch ID to open it up. Well, for that we have screen wake lock. That was not available on Safari until this year, but now it's there. So we can use it in Safari as well. In this case, we can request a wakeLock.

In this case, we're asking the browser, hey, browser, please ask the OS to not lock the screen while this web app is running, is in the foreground. And we have an event that we can listen to that is 'release'. They will tell us when that event was released by the OS for some reason, maybe the user went to another page.

If that happens, then it's released, you can retake it if you want when the user goes back, you can apply for it again. In our example, we do have it. So there is a capability in Cooking Masters. One of the ability here is Wake Lock. So I can request Wake Lock.

We don't see anything actually. What I have here for the Wake Lock, I did this icon, this emoji. So if I click there, if you see the icon, it's because it was granted. It is difficult to test this naturally [LAUGH], right, you need to trust me that it will work.

But if not, you need to try this. We need to set up the machines, then wait one minute, then go to lock, but it works. So this was actually important for a lot of apps because it was a big problem that, I mean, things like even, well, not Netflix, because when a web app is playing video, there is a wake lock of automatic there.

But it was a problem for other kind of apps that are not using video, it can be a game, or an immersive game in metaverse. But it's not video, or maybe you're not playing, you're watching something, and then the screen goes off. Well, now you can request, that while the page is there on the screen, please don't do that.

But have in mind that using this API will have a cost for the user. So be a good citizen and release that when you don't need it anymore. So if I'm getting out of the full screen, right now I'm releasing the wake lock, because now I don't need to keep the screen on anymore.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now