Keep screen alive and / by user interaction

Hello.

I know that this topic was discussed in this post and in this post and they are marked as Solved, but for me it is not clear yet.

I know that @hhuman posted the solution but I was trying to workaround and to have the webpage / screen in the app activ as the user open the screen without any interaction.

So, the idea is to have the screen active as it opens.
I have removed the button for user interaction and I have the app screen full alive, without any enabling button, BUT it is not working if the user has the phone on Low Battery Mode…
AS I use the version from @hhuman with the button that it is enabled by user, the screen stays alive even if the phone it is on Low Battery Mode.
WHY?

  1. Does anybody has idea how to make it to work even on Low Battery?
  2. Can somebody provide me a solution to have the enabling button under a Thunkable button?

Here is the code from my version, without button with onload function:

<html>
  <head>
    <title>NoSleep.js - Simple Test Page</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
<script src="NoSleep.min.js"></script>
<script>
      function myFunction() {
  var noSleep = new NoSleep();
       noSleep.enable(); // keep the screen on!
       document.body.style.backgroundColor = "green";
    }
    </script>
  </head>
  <body onload="myFunction()">
    <h1>NoSleep Test Page</h1>
  </body>
</html>

And this is the code from the original version:

<html>
      <head>
        <title>NoSleep.js - Simple Test Page</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
      </head>
      <body>
        <h1>NoSleep Test Page</h1>
        <script src="NoSleep.min.js"></script>
        <input type="button" id="toggle" value="Wake Lock is disabled" />
        <script>
          var noSleep = new NoSleep();
          var wakeLockEnabled = false;
          var toggleEl = document.querySelector("#toggle");
          toggleEl.addEventListener('click', function() {
            if (!wakeLockEnabled) {
              noSleep.enable(); // keep the screen on!
              wakeLockEnabled = true;
              toggleEl.value = "Wake Lock is enabled";
              document.body.style.backgroundColor = "green";
            } else {
              noSleep.disable(); // let the screen turn off.
              wakeLockEnabled = false;
              toggleEl.value = "Wake Lock is disabled";
              document.body.style.backgroundColor = "";
            }
          }, false);
        </script>
      </body>
    </html>

Any idea?
Thank you!

1 Like

Hi @io.nut.ilie

Please don’t just mention a bunch of people in the community to get a faster reply.

My quick guess would be that maybe the OS does prevent JavaScript from being run without user interaction (onload) when the battery saving mode is on. Javascripts often consume quite a lot of energy so it would make sense to disable ones that just load in the background when the battery is low :thinking:

Best, Chris

1 Like

Thank you.

Hi, @io.nut.ilie! :wave:

Should we consider your problem as solved?

Thanks a lot!

P.S. Anytime you would like to mention me, please mention @kartik14 instead of @kartik (@kartik is discontinued account, so I might not get any message.)

Thank you @kartik14 for your replay!
I understand what may be the cause but this is not the solution.
I need to have in a way the trigger it with a Thunkable button, that will generate more actions, beside the enabling of the NoSleep.
:pray:

1 Like

Hey, does it make any difference if you have the html file loaded from online or native? How about if you have the webviewer call the file/address in the code upon screen loading?

Thank you @hhuman.
I am not sure how to implement it native and for the moment I just abandoned it the project.
Anyway, the idea of keeping alive the screen it is essential for many types of apps.

I’m sorry that you put the project aside for now. To implement it in the app, I had to add the js script to the header of the html file itself and just uploaded as an asset and set webviewer block to wakelock.html in the code block upon screen loading up.

I combined your auto wake lock function and the original toggle button together in the body of the html file and it locks upon startup for my devices. So in case it doesn’t auto lock, the button is right there for the user to enable themself. The only thing is that for some devices, it doesn’t disable when they click disable… not a big problem.

So thank you for sharing your work above that my app is now improved.

*This is all for android that I am talking about btw. Not sure about iOS.

really wish there was a way for this i have a podcast app and have to have the player load externally But i had another streaming radio app which played in the background but dont seem to have that option here on thunkable