37

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?)

5
  • 1
    On Android, you'll need to write a native app and run a service to keep active. I doubt ios is much different.
    – 323go
    Commented Mar 17, 2013 at 19:39
  • 3
    For Android, yes, of course, thought your "web app" would have to be downloadable as an application (like in what Phone Gap provides). And then you'd probably need to use the Java layer as well to do some of that work, using AsyncTask and a Service. For iOS, I have no idea. Commented Mar 17, 2013 at 19:40
  • Although I doubt it.. you may a little luck getting this to work. with an iframe. stackoverflow.com/questions/7047989/… [see first answer. ]
    – Madushan
    Commented May 14, 2013 at 10:50
  • 3
    It is now 2018, did things change? Can service workers help, for example?
    – Fla
    Commented May 3, 2018 at 8:28
  • Thinking this has to be a security issue. Imagine if any web page could simply fire up scripts that ran continuously in the background even if you locked your screen and put your phone in your pocket. Native apps are allowed because you have to specifically download and approve that app. But a web page? ehhh...
    – JamieB
    Commented May 29, 2020 at 20:40

2 Answers 2

28

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.

3
  • 1
    It is now 2018, did things change? Can service workers help, for example?
    – Fla
    Commented May 3, 2018 at 8:34
  • See the other newer answer for details (I haven't done that myself).
    – moodboom
    Commented May 20, 2018 at 0:21
  • 1
    it is now 2021, did things change ? No, web / service worker can't help yet :D .. they stop running background on mobile Commented Apr 14, 2021 at 7:34
6
+25

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.

2
  • 3
    SW are grate but not perfect, it's mostly limited to push notification, network event and caching things. It's no good at staying alive and will force close after 10min or so if things are preventing it from going idle. It have no control over playing music, geo monitoring or p2p stuff :(
    – Endless
    Commented May 14, 2018 at 14:19
  • Are you sure service workers are still running when the screen is off? What about Web Worker?
    – Fla
    Commented Oct 21, 2019 at 11:11

Not the answer you're looking for? Browse other questions tagged or ask your own question.