What I’m trying to do:
Keep the screen on while the user is using the Anvil app without touching the screen on the phone.
What I’ve tried and what’s not working:
I have no clue where I should work from. The screen will be off after a few seconds if I don’t touch the screen. Is that something JS would be the solution?
Code Sample:
# this is a formatted code snippet.
# paste your code between ```
Clone link:
share a copy of your app
I have solved this problem long time ago by embedding a 1x1 video in a custom html and playing it on loop somewhere on the page. The screen will be on as long as there is a video playing.
I’m sorry I can’t show you the code, I don’t even remember where I used it, but I hope this puts you in the right path. (Or maybe it puts you in the wrong path if in the meantime browsers have grown a better way to do that 
)
Hi @sunxiaoquan,
we had a similar problem and for most cases the wakelock api works great:
this python snippet should get you going:
import anvil.js
from anvil.js.window import navigator
anvil.js.await_promise(navigator.wakeLock.request('screen'))
Carefull though this is not supported on all plattfroms, in which case it will throw an error. Also we have seen cases where it does not work when the device runs low on battery.
Anyway - hope this helps!
Thanks for your reply. I tried but got an exception as below. Have you ever met that?
ExternalError: NotAllowedError: Failed to execute ‘request’ on ‘WakeLock’: Access to Screen Wake Lock features is disallowed by permissions policy
Yes - as I said, this is not allowed on all browsers, always check Browser compatability for Web API’s:
And I think in the IDE its not allowed as well.
Just wrap it in a try except block and you should be fine.
Gotcha! I would try to embed a small video.
Why not do both? Try @mark.breuss 's method, in a try / except block and handle the exception with @stefano.menci 's answer. This is the best way to future proof it (as much as possible) imo.
You might even include an alert that pops up if the exception triggers to ask the user to check on / change the device settings to allow the browser to keep the screen awake.
Well… Mark’s suggestion would be a quick fix, my suggestion (I think it’s more reliable, but) is not so straightforward. You need to play with a custom html, get a tiny video, get it to automatically play and loop. I would keep this as a last resource. A reliable one, but not an easy one for beginners.
In the weekend I may try to put together a custom component that does it, if I can find where I did it, and if I can find the time.
My answer to this question was, I never had considered anvil had a solution.
In my circumstance people are using the devices as an interface, (just for anvil) and I set the devices up, and I set them up so they don’t go to sleep or turn off the screen at all unless you hit the lock button.
(However you might do that on Android / IOS / version flavor of the week)
Also the lock button is inside a case that I modified so the button is inset and can’t be ‘accidentally’ pushed.
These browser based solutions seem much simpler and I will probably use them in the future.
Edit:
Now that I think about it, many were also running the Linux Termux app before I started using anvil so that is probably why I did it that way. Anvil has allowed me to move away from using termux.
I tried to use the YouTube component to embed a video with autoplay and loop on, but it did not work. Trying other ways to embed a video.
I am pretty sure you can embed a video directly into HTML using HTML5, I would guess @stefano.menci 's answer was probably referring to this method.
(I did not look it up or try)
I can’t be sure but I think he was talking about something like this:
https://anvil.works/build#clone:FQWURCZ3BCRLPRXN=4CGMFMZKL33HACH7PCKFVFOE
HTML:
<video width="1" height="1" autoplay muted loop >
<source src="videoplayback.mp4" type="video/mp4">
X
</video>
The clone link contains a one second long silent video file in assets called “videoplayback.mp4”
Yes, this is exactly what I was talking about.
I remember creating a mini mp4 for this, I guess you have done the same.
Thanks for your code, I tried, but it did not work on iOS safari.
@ianb, I cloned your app, added a KeepScreenOn custom component, used your html code, added _/theme to the url, tested it on Chrome on my Android phone and it worked.
Here is the clone link:
https://anvil.works/build#clone:3TUKV224RPLLO5E2=N4XNKIRKGMKPZDAXFDAWQB4K
Here is the test app:
@sunxiaoquan, can you try this test app on your Safari?
Thanks! I tried, it doesn’t work on iOS Safari.
I may have to use React to build an app with NoSleep.js and deploy to Netlify.
The example website NoSleep.js - Simple Test Page works well on iOS Safari.
Many thanks that everyone is helpping me with this issue. I have found an acceptable solution as below.
The only issue is the package requires a click/touch input to enable the function. I haven’t found a way to enable it as default. It works well on iOS Safari.
Here is the example App
I don’t have any ios device, can you please test this on yours?
I’m curious to see if it doesn’t work because of some Anvil interference or it just doesn’t work.
This is the original page where I first used this technique. It was BA (Before Anvil), one of my first web based tools. I used to use it on an android tablet and it did keep the screen on.
Running Safari iOS 15 on a colleagues iPhone here with that link did not keep his screen on longer than his normal timeout.
We just left it on a desk screen up and did not touch it, and it auto-locked after 2 Minutes.
I am unsure if this can even be done with an app on iOS without giving the app itself (in this case safari) specific permissions to keep the screen on, and I do not know if safari even has the ability to request that permission? I guess there is something you can set with auto-lock and streaming video, but 
I know with android you can pin an app and also give it permission to override the global screen sleep settings. (At least you used to, my company tablets run an older flavor of android)
It did not work. I see the code in the source code about the video. And it also shows the vido on the iPhone, but the video cannot stop the screen going off.