In HTML5, How to Keep an Android Device's Screen On

In HTML5, how can I keep an Android device’s screen on?

There is no way to ONLY write javascript or other web code to keep the screen on, without writing at least a little java code.

To explain why I am so certain, if you are developing a web app through html5 you MUST use a WebView as the main "screen" of your application to host your html,javascript code. So your "web code" does not directly run in the application but uses a View as its holder. As you can guess you can't just lock the screen from some code that is not even running in the native part.

I can provide a very easy and simple way to keep the screen on if you are not an expert in android programming. In the first activity, that uses the WebView I guess, add in onCreate after super:

getWindow().addFlags(WindowManager.LayoutParams.FLAG_KEEP_SCREEN_ON);

HTML5 mobile app running while phone screen is off?

My music app is HTML5 and also needs to run in the background. The support for that varies depending on mobile browser.

• Safari on iOS: will continue to play one or two songs in the background
• Native browser on Android: will play one song then stops
• Firefox on Android: will stop when screen locks or browser loses focus or song ends
• Dolphin on Android: plays in background! but eventually stops
• Opera on Android: better background support, Javascript continues to run and music continues to play even when screen is off or Opera is sent to the background, but eventually stops after a couple songs.

As you can see it's hit or miss. Half the time I end up trying to put my phone in my pocket backwards, trying to keep the screen on, until I accidentally press it - totally sucks. I long for the day when the user has more control over running HTML5 apps in the background. If I had to guess I would say that universal support for that is very far off, if it ever even gets traction. I'm being forced toward a native app solution even though I am almost positive Apple will never approve it. In the meantime, I'll remain hopeful and keep testing the latest mobile browsers. Because if it actually happens it will be awesome. :-)

I should also point out that, in my experience, for pretty much all of the above combinations, using HTML5 to simultaneously run javascript, pull network data, and play music will typically turn your phone into an oven and kill your battery pretty quickly. Ugg.

In addition, if you are using jQuery Mobile (which is mostly fantastic), you will see different touch handling on the different browsers. For example, Firefox touch works great, Dolphin is terrible and requires precise touch-and-hold-and-release to get right. That's not directly HTML5's fault, but another issue I'm dealing with.

Here are another developer's interesting thoughts on mobile HTML5.

UPDATE: I just (May 22, 2013) downloaded Opera on my Samsung Galaxy S3 and it has the best HTML5 support so far. For my app, it continues to run javascript in the background, whether the screen is off, or Opera is pushed to the background, for at least a couple songs.

HTML5 Full Screen Web Apps: No browser bars

I know this question is a bit out of date at this point so here is an update:

On Safari for iOS 7+ this solution is great:

<meta name="viewport" content="minimal-ui, width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

The minimal-ui attribute makes the browser hide all the buttons while keeping the taskbar intact.

I have not tested this for android.

How to keep mobile screen on

If I read the documentation correctly, and I may not, because I've never used this before, then you can add the insomnia plugin to your cordova/phonegap build like this:

$ meteor add cordova:nl.x-services.plugins.insomnia@https://github.com/EddyVerbruggen/Insomnia-PhoneGap-Plugin/tarball/47ba15a4ad791eb4d5a0643cdb7ef69f73109e15

And then use:

window.plugins.insomnia.keepAwake()

and

window.plugins.insomnia.allowSleepAgain()

---

Update for Meteor 1.2:

Install plugins from a Git URL: Meteor no longer supports installing Cordova plugins from tarball URLs, but does support Git
URLs with a SHA reference (like
https://github.com/apache/cordova-plugin-file#c452f1a67f41cb1165c92555f0e721fbb07329cc).
Existing GitHub tarball URLs are converted automatically.

This means that you now need to use:

$ meteor add cordova:nl.x-services.plugins.insomnia@https://github.com/EddyVerbruggen/Insomnia-PhoneGap-Plugin#47ba15a4ad791eb4d5a0643cdb7ef69f73109e15

Update 2

As user3819370 points out, the plugin is now in the registry being used by meteor, so you can simply install it like this:

meteor add cordova:cordova-plugin-insomnia@4.0.1

HTML5 full-screen mobile apps

1) Go through this link.. Hope this will help you. https://gist.github.com/kylebarrow/1042026

2) Try out this - (Works in iOS 6.1, 8.0.2)

$(document).ready(function(){
    if (("standalone" in window.navigator) && window.navigator.standalone) {
      // For iOS Apps
      $('a').on('click', function(e){
        e.preventDefault();
        var new_location = $(this).attr('href');
        if (new_location != undefined && new_location.substr(0, 1) != '#' && $(this).attr('data-method') == undefined){
          window.location = new_location;
        }
      });
    }
});

3) Ben Nadel Blog is really good regarding same issue. https://www.bennadel.com/blog/2302-preventing-links-in-standalone-iphone-applications-from-opening-in-mobile-safari.htm

4) Add this in the <head> section of your site!

    <script type="text/javascript">
            (function(document,navigator,standalone) {
                // prevents links from apps from oppening in mobile safari
                // this javascript must be the first script in your <head>
                if ((standalone in navigator) && navigator[standalone]) {
                    var curnode, location=document.location, stop=/^(a|html)$/i;
                    document.addEventListener('click', function(e) {
                        curnode=e.target;
                        while (!(stop).test(curnode.nodeName)) {
                            curnode=curnode.parentNode;
                        }
                        // Condidions to do this only on links to your own app
                        // if you want all links, use if('href' in curnode) instead.
                        if('href' in curnode && ( curnode.href.indexOf('http') || ~curnode.href.indexOf(location.host) ) ) {
                            e.preventDefault();
                            location.href = curnode.href;
                        }
                    },false);
                }
            })(document,window.navigator,'standalone');
    </script>

---

Related Topics