But realistically, what happens to me is that my phone does turn off, and then I have to turn it back on with sticky fingers and whatever.
Okay, so how did we manage to do this? How did we prevent this behavior? So my device wouldn't turn off, although I had some specific system preferences that it needs to turn off. There is a very cool API called Screen Wake Lock API, which basically prevents our screen from locking. And it can only work if the document is visible, if the user is observing the page at the very second.
If we would do this in React, we would have a hook, let's say, use wake lock hook. But here, the situation is a little bit trickier than in the previous example. We pass that toggle functionality, is it turned off or not? And then if we do that, we call request wake lock sentinel. That function is going to call on a navigator, we have a wake lock object, and we call request method and pass screen parameter. That is a promise. Can anybody tell me why do you think it's a promise? Anybody? Yeah, yes, please. That's a good call. But in this case, no, you don't have to do that to ask permission for this one, but that's a good guess. Do you have maybe any other idea?
Okay, basically, it could fail. That's why it's a promise. And it could fail in certain circumstances, like if your battery level is way too low, you couldn't request the sentinel. And you may notice that we put this in a reference and not in the state. Why is that? Because this function will return a value that is held in memory. And we need to clear that exact value in memory. If we do that in the state, we would lose it. So that's why we have to put it in a ref. And once we clear it out, if we turn the toggle back off, then we would clear the reference, and we would have to call the release method on that reference. We have to do all of these steps. Otherwise, it won't work.
Use cases in this case, let's say we're reading an ebook, we're presenting to the audience, we're following a cooking recipe. We're following map navigation, and we don't want our map to turn off or we're scanning a QR or a barcode. Browser support in this case, well, not as previous. We can see that Chromium vendors are supporting this, Firefox doesn't have support for this. And this blue sign for the Safari means that it's in the experimental phase. So they're getting there, but they're not quite there yet. So that's something that we should be always aware of.
Comments