Is it possible to make an HTML5 Trip Meter that tracks distance traveled?

I'm trying to de开发者_Go百科velop a webapp that users can run on their mobile phone to track the distance they've traveled. Think of it as something like RunKeeper, but in webapp form.

The following article describes an easy way to create a Trip Meter with HTML5 and and the Geolocation API.

http://www.html5rocks.com/en/tutorials/geolocation/trip_meter/

However, this just seems to calculate the distance between point A and point B. I suppose I could use something like JavaScript's setTimeout to track the distance traveled every 5 seconds, then calculate the total at the end. However, when the webapp is running in the background (or the phone is locked), this JS won't be executed. Is there any sort of solution to this problem?

You don't need to use setTimeout, the watchPosition will fire the callback function every time the location is updated. However, you are correct that the JavaScript will only run when the web app is not in the background and the phone is not locked. You may be able to write an HTML5 app then convert it to native with something like PhoneGap.