I have a html5/JavaScript app. I would like to notify the user when a countdown timer runs out.
The problem is mobile safari. It looks like (unless I'm a native app) I.
Can't play a sound by itself (apparently mobile Safari requires sound to be played on user action (to prevent unwanted bandwidth consumption I'm guessing)
Can't vibrate phone (window.navigator.mozVibrate(pattern) does not appear to work)
Can't flash the screen with some colors because the screen will typically go off after 30 seconds (and I can't tell the screen to turn on if it's off in mobile safari either)
Can't send itself a notification
Heck, is there anything I can do without forcing the user to download a native application? Any type of cue or indication to look at the phone?
Related
Very similar questions in the past:
HTML5 website running while phone screen is off?
HTML5 mobile app running while phone screen is off?
But now it's 2020... and just a few months ago this worked on firefox. I created a small test page that should "speak" every ~10 seconds and tell you the x/y offset in meters from when you first loaded the page. When the screen is on it also shows you this on a map.
https://supplyrunner.netlify.app/test0/index.html
When the screen was turned off I could not get this working using chrome on my android phone but it worked with firefox. I didn't think the support would get dropped so I didn't note the version of that browser. Now it no longer seems to work with the latest firefox, chrome, or Opera (with the screen off).
Is there anything I can do to tell these browsers to continue running in the background? I looked at requesting wakelocks (https://developer.mozilla.org/en-US/docs/Archive/B2G_OS/API/Navigator/requestWakeLock) but that didn't work on firefox and had no effect on chrome.
Is there another browser I can use that has more reasonable behavior or options? I believe a user should have the option to run webapps in the background, even if it means explicitly running the browser in a different mode (similar to incognito) for the sake of security and transparency.
Is there anything I can do in my JS code (web workers?) to force some code to run in the background? Can this code access geolocation and the speech API (so it can talk to the user).
Worse case option: Are there any apps I can run that would simulate a screen lock such that a user could run the webpage, then run this app instead of locking their screen, allowing the page to continue running while the screen turns black and becomes unresponsive to touch (so they can put the phone in their pocket), but the OS doesn't register this as a "screen off" event?
Are there any other alternatives that I haven't thought of?
Note that I have an application that requires background geolocation and access to audio out (to speak or play sounds). This was originally written as a native android app but in the past year I have refactored it to be a webapp to avoid issues with google API keys and licenses, to make it OS agnostic (iOS and android), and also to make it much simpler to extend and customize. Going back to a native app is not an option.
Edit:
Here is a simpler page that shows the same issue (with no map) in less than 50 lines of JS/html combined: https://supplyrunner.netlify.app/test1/index.html
I noticed that firefox on android actually still allows some things, like youtube videos, to keep running media in the background with the screen off, but seems to no longer run JS so window.speechSynthesis.speak() and navigator.geolocation.getCurrentPosition() don't work.
I have created a Web App which plays music playlist and it works well on desktop browsers and also in mozilla and opera of android. But When I play the songs on Chrome browser of Android and I turn off the screen, it stops after playing the current song. And as soon as I turn the screen on, it starts loading the next song in line.
From my observations, what I have understood is Google Chrome browser on android pauses the javascript code from executing if the screen is turned off till the screen is not waken up again. Is there any way I can prevent my specific library from pausing? Any approach or events?
Some related this question is what I am looking for: JavaScript halts in inactive android Chrome tab
There are so many WebApps which does not stop playing music. Does it need some permissions from Google App Store?
check what happens with youtube, at least few years ago i had an awful time dealing with that and that's what proved to my client it cant be done in the given time frame and budget. that was actually device specific, on some devices it worked fine and on others it didnt. check if it happens on other devices. the only solutions i could think of ware either to prevent screen turn off (on problematic devices or all of them at the beginning), or to build an app and handle onPause event
I don't think that you can change the behaviour of the Chrome app, if they want to save battery in the background and stop the javascript, you won't reactivate it.
There are maybe some other ways to get it working.
Tell your users that they should use Firefox or Opera on their mobile device.
All apps are allowed to play or stream music in the background, so you could make or use an app for your task.
Maybe you can use the default music player app on android. Open a playlist of streams using the app. (I don't know if this is possible, because I have no android device.)
I know that is not exactly what you want, but a maybe a way to get it working.
i am searching a way to check if user has watched the entire video on iOS device. I have tried 2-3 html5 video frameworks. Now i make tests with Popcorn.js.
I want the user watches the entire video and not skip to the end. I have tried every possible way i could think but nothing works on iOS. I tried the seeked method but it's not be triggered if an iOS user seeks back-and-forth.
In desktop everything works great of-course...
JPlayer does not start playing automatically after setMedia() followed by play() on mobile device (Android), but works fine on chrome for PC and even internet explorer, what should i do to get it playing.
This is normal behaviour. On mobile devices playback must be initiated by user interaction. Take a look here for more details -> link
I am building a web application with sound - when I run it on iOS (in a browser, mobile Safari or Chrome - I'm not using a native wrapper like PhoneGap) and lock the screen, the sound keeps playing. Is there any way to detect from a webapp whether the user has locked the screen and to turn the sound off when the screen is locked?