0

I have a web app ( using React ), and I want the display to not fall asleep when the user is on my web page. How can i achieve that? I tried running <video autoplay muted loop> but that did not work out, the video plays but the OS still goes to sleep ( Im using Mac btw ). I also tried to fetch from a server every 30 seconds but that did not work out too. I also tried with <audio> but still no success.

I see that YouTube somehow is able to succeed doing that, when I watch a video there even if it is muted my monitor does not go to sleep.

I heard there is some webLock browser api but it is not supported in Firefox and that's a problem for me so I am trying to find another way.

EDIT: I have heard of noSleepJs but I read somewhere that it puts a strain on the battery of the user and could cause also lag, is that correct ?

Valeri Petkov
  • 11
  • 2
  • You should look at the [Scren Wake Lock API](https://developer.mozilla.org/en-US/docs/Web/API/Screen_Wake_Lock_API) for most cases and also at [NoSleep.js](https://github.com/richtr/NoSleep.js) for the rest. – Gabriele Petrioli Jun 23 '23 at 11:13
  • Does this answer your question? [How to prevent screen sleep using javascript](https://stackoverflow.com/questions/59471449/how-to-prevent-screen-sleep-using-javascript) – Heretic Monkey Jun 23 '23 at 12:04

1 Answers1

0

I would prefer using the NoSleep.js library. This library provides a simple way to prevent the browser and device from going to sleep. To use it, you would first need to install the library in your project. Then, you would need to add the following code to your app:

import NoSleep from 'nosleep';

const noSleep = new NoSleep();

function enableNoSleep() {
 noSleep.enable();
}

document.addEventListener('touchstart', enableNoSleep, false);

Or you can use-stay-awake React hook. This hook provides a simple way to keep the device awake while the user is actively using your app. Here is how:

import useStayAwake from 'use-stay-awake';
const App = () => {
const [isAwake, setIsAwake] = useStayAwake();

return (
 <div>
  <p>The device will stay awake as long as this page is in focus.</p>
  <button onClick={() => setIsAwake(false)}>Put the device to sleep</button>
</div>
);};
Linux Fanatic
  • 69
  • 1
  • 5
  • Huh, just a quick question. I could not really understand the event touchstart by reading it's description. When is it triggered ? – Valeri Petkov Jun 23 '23 at 12:14
  • The touchstart event occurs when a user touches an element. It only works on touch screens. – Linux Fanatic Jun 23 '23 at 12:43
  • Hey, um I tried the example with nosleepJs and it seems to me that it does not work in firefox for some reason. Its fine in Chrome but in FIrefox it still goes to sleep. – Valeri Petkov Jun 23 '23 at 13:54
  • The useStayAwake hook is not supported in Firefox. This is because Firefox does not have a native API for preventing the device from falling asleep. There are a few workarounds that you can use to prevent the device from falling asleep in Firefox. One workaround is to use the setInterval() method to call a function that keeps the display awake. – Linux Fanatic Jun 23 '23 at 15:54
  • Also, If this solves your problem please accept the answer. – Linux Fanatic Jun 23 '23 at 15:56