Wake Lock API: Stay awake as long as you can!

Have you ever been wondering on how to prevent your screen or CPU from going to sleep? If you haven’t that would be the right answer. But what if you’d think about that as a part of the business rule which may have a financial impact on your monthly income? Would you still consider it?

The important question to ask – do you want to drain someones’ battery to death? No, I don’t want to do it because I’m thinking about that in a different way. I promote the sentence that if the software was implemented well and with caution, it will not cause a harm to the machine of the user even if added API contains security and privacy considerations described in the documentation.

1. Admission

In this article, I’m going to introduce you Wake Lock API, which is a dangerous API if implemented in a wrong way. The API in itself has been improved and is being updated because of previous issues related to the old implementation. Currently, the new functionality is not being supported by any of the major web browsers. It is being supported under Firefox OS but it is an old and deprecated functionality.

2. Security and privacy points

I have to mention and touch this point because I feel that it is important for you as a developer to know and protect your users. You need to be cautious about the following API because it is causing GPU and CPU any many other various devices of your machine to operate at high power levels which of course can lead to declining of your battery and overheating. It is mostly related to mobile devices. The Wake Lock functionality is global, which means that you can access it from the navigator.

3. Code samples

We have come to the part that I like the most. Don’t get me wrong above notes are really important to me as well. I’d like to show you code samples from the new implementation of Wake Lock API.

One disclaimer – the syntax is still in progress as it is a draft specification and the last update to it was on 10th of July 2018.

Example 1:
On the below example the API is requesting a screen wake lock and releases it after a while:

navigator.getWakeLock("screen").then(function(wakeLock) {
  var request = wakeLock.createRequest();
  setTimeout(function() {
    request.cancel();
  }, 1000);
});

Example 2:
On the below example the API is requesting a screen wake lock and listens to wake lock state changes:

var request;
navigator.getWakeLock("screen").then(function(wakeLock) {
  request = wakeLock.createRequest();
  document.getElementById("wakeLockActive").innerHTML = wakeLock.active;
  wakeLock.onactivechange = function() {
      document.getElementById("wakeLockActive").innerHTML = wakeLock.active;
  };
});

Example 3:
On the below example the API requests two screen wake locks and cancels both independently.

var request1;
navigator.getWakeLock("screen").then(function(wakeLock) {
  request1 = wakeLock.createRequest();
});

// ...

var request2;
navigator.getWakeLock("screen").then(function(wakeLock) {
  request2 = wakeLock.createRequest();
});

// ...

request1.cancel();
request2.cancel();

4. Summary

You’re not going to believe me because you’re thinking that I’m slaughtering the API because of its power to drain the battery to death or talk to CPU to go to kill itself. The truth is that in the first place, I was stunningly excited about that and I was thinking “WOW” incredible idea and a feature. I was literally thinking – where the web APIs are moving? We can control our screen’s state now. Afterwards, I performed more reading and started understanding the consequences of the API, then I stopped being that stunned but still, I’m a big fan of it.

What about support and implementation in the web browsers? As far as I could find, the functionality is being implemented by one of the teams working on contributions to Chromium. Let’s hope it works out because I would definitely try to implement it in one of my projects.

Down below you can find a couple of resources like the W3C spec, etc.

W3C spec - Wake Lock API

Chrome Status - Wake Lock API

That would be it in this blog post, let me know your thoughts in the comments down below and please share the article.

Until next time!