Is HTML5 browser geolocation feature on mobile available while screen off/ suspend?

Question

To substitute my usage of native apps that allow to keep track of my position, I wanted to generate a PWA using the HTML5 Goelocation API.

The result I have been able to achieve so far seems to point a inferior functionality of the HTML5 Goelocation API compared to native Android API.

Below is the code I have used and the issue is, that the PWA/ website application only receives infrequent updates. Additionally the app only receives position while the screen is not off.

This puts a huge obstacle into having a PWA being to track for instance my bike tour, since I cannot keep the screen and browser in the foreground, while ideed I wished the PWA would simply continues running even when the screen is off.

Now I am aware that in most cases a device user and privacy aware person would benefit from the useragent/browser to cut the waste of resources and limit privacy loss by disabling the very feature I search.

In essence however I have looked over the MDN documentation and besides the PositionOptions I was yet unable to find any clue about the guarantees of the API.

Find below the way I have sought to make it work as a code.

• Does + Should HTML5 Goelocation API work when screen of on a mobile?
• Is there a concrete information about if and how much geolocation information is returedn? like frequency/delay of update and like geofencing imprecision ?
• Could for instance google maps navigation work in the browser itself?

My platform is Gecko on Android. If better results could be achieved in Chromium on Android I would be happy to hear about that too.

On Android I use firefox. In it I wanted to have my website provide a page that keeps track of my movements via the geolocation API, in order to replace my strave.

window.addEventListener("load",function(){

    var a=  document.createElement("div");
    var textarea = document.createElement("textarea");
    //textarea.value="aaaa"
    textarea.style.display="block"
    textarea.style.minHeight="5cm"
    textarea.style.width="100%"
    document.body.appendChild(a);
    document.body.appendChild(textarea);
    if(confirm("reset data?")){
        localStorage.clear() ;
    }
    localStorage.setItem("start"+Date.now(),startInfo);
        
    var startInfo = Object.keys(localStorage).length+ " " +Date.now()+ " " + (Date.now() % 864000);

    var lastTime=0,lastLat=0,lastLon=0,count=0,lastDistance=0;
    var startTime = Date.now();
    var distance = 0;

    if('geolocation' in navigator) {
        a.innerHTML="<h2>super wir haben geolocation!</h2>";
        setInterval(()=>{
        navigator.geolocation.getCurrentPosition((position) => {
            
    //      var a = document.createElement("div");
            count++;

            a.innerHTML="<h1>"+(((Date.now()-startTime)/1000)|0)+" "+((distance*100|0)/100)+"</h1><h3>"+startInfo+"</h3><h2>date="+(new Date()).toString()+"<br>lang="+position.coords.latitude+" long="+ position.coords.longitude+"</h2>";
            var lat = ((position.coords.latitude * 10000000) | 0)
            var lon = ((position.coords.longitude * 10000000) | 0)
            var time = Date.now();
            var deltaTime = time - lastTime;
            var deltaLat = lat - lastLat;
            var deltaLon = lon - lastLon;
            if(Math.abs(deltaLat)>100000 || Math.abs(deltaLon) > 100000)
            {
            } else{
                distance += Math.sqrt(deltaLat*deltaLat+deltaLon*deltaLon);
            }
            var deltaDistance = distance - lastDistance;
            lastLat=lat;
            lastLon=lon;
            lastTime=time;
            lastDistance=distance;

            newline = (((Date.now()-startTime)/1000)|0) + " dist="  + distance + "("+deltaDistance+") lat=" + lat + "("+deltaLat+") lon=" + lon + "("+deltaLon+") "; 
            textarea.value = newline + "\n" + textarea.value;
            
            localStorage.setItem("P"+(Date.now()%864000),deltaLat+" "+deltaLon+" "+deltaTime);
                
        },function(){},{timeout:900});
        },1000);
    } else {
        a.innerHTML="<h2> shit</h2>";
    }

});