HTML5 mobile app running while phone screen is off?

Question

I'm interested in creating an HTML5 geolocation-based web app that could still be operating when the phone screen is off (say, tracking how far you've been running when your phone is in your pocket).

Is there any way to keep the app running but have the screen be off, or have the app run in the background while other apps are being used? Is this possible at least on some of the popular mobile devices out there (newer iOS and Android devices in particular?)

Answer 1

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.

Answer 2

You can use Service Workers:

https://developers.google.com/web/fundamentals/primers/service-workers/

A service worker is a script that your browser runs in the background, separate from a web page, opening the door to features that don't need a web page or user interaction. Today, they already include features like push notifications and background sync. In the future, service workers might support other things like periodic sync or geofencing.

To be precise, applications can register a service worker as follows:

if ('serviceWorker' in navigator) {   window.addEventListener('load', function() {     navigator.serviceWorker.register('/sw.js').then(function(registration) {       // Registration was successful       console.log('ServiceWorker registration successful with scope: ', registration.scope);     }, function(err) {       // registration failed :(       console.log('ServiceWorker registration failed: ', err);     });   }); } 

Once the service worker registration is successful, any application logic implemented in sw.js will execute in the background; even if application tab is disabled.