Web Worker for GPS location not returning vales from worker script

Question

I am working on a web-worker project. The web-worker is a small javascript file that determines the users GPS coordinates and sends the data back to the main page script every 5 seconds using postMessage.

I have tested the worker javascript alone and it seems to be working fine, I can get the GPS coordinates every 5 minutes and display them in an alert box (for testing) and I have tested the main page code with another worker script and it too seems to be working fine, but when I test the main page code with the worker script to get the GPS coordinates, nothing is received from the worker script.

Can anyone please help me figure out why this is not working and suggest a solution?

My goal is to have a gps worker script that runs continuously in the background and updates the user's gps position every 5 minutes, then passes that information back to the main page script where it will be displayed and stored in a mysql database.

Here is the main page script

<!DOCTYPE html>
<html>
    <head>
    </head> 
        <body onload="startWorker()"> 
            <p>Your GPS Coordinates are:
                <output id="result"></output>
            </p>
            <script>
                var w;

                function startWorker() {
                    if (typeof(Worker) !== "undefined") {
                    if (typeof(w) == "undefined") {
                        w = new Worker("x05.js");
                    }
                    w.onmessage = function(event) {
                    document.getElementById("result").innerHTML = event.data;
                    };
                    } else {
                        document.getElementById("result").innerHTML = "Sorry! No Web Worker support.";
                    }
                }
            </script>
        </body>
</html>

and here is the worker file script

function getLocation()
{
    navigator.geolocation.getCurrentPosition(getPosition);
}

function getPosition(position)
{
    var lat = position.coords.latitude;
    var lon = position.coords.longitude;
    var location = 'lat='+position.coords.latitude+'<br>long='+position.coords.longitude;
    postMessage(location);
    setTimeout(getLocation, 5000);

}
getLocation()

For clarification, the worker file script is named x05.js and for testing the worker will return the GPS coordinates every 5 seconds, but the final code should return the GPS coordinates every 5 minutes. — D. Oakley
@ Kaiido, thanks for the input. I corrected the typo and removed the redundant <body> tag, but I'm having the same problem. No output from the x05.js worker script to the main page code. — D. Oakley
@ Kaiido, yes, I kept the <body onload="startWorker()"> tag and removed the <body> tab from line 3 — D. Oakley
I corrected the HTML but that did not affect the function of the program. I updated the code in my initial question. — D. Oakley

Kaiido Kaiido · Accepted Answer · 2019-02-12T05:07:50

Your issue is that the self.navigator object from the Worker scope is not the same as the one form the main scope.

What you have here is a WorkerNavigator object, and this object, unlike the Navigator one, doesn't have a geolocation property.

const w = new Worker(getWorkerURL());
w.onmessage = e => console.log(e.data);

function getWorkerURL() {
  return URL.createObjectURL(new Blob([
    document.querySelector('script[type="worker-script"]')
      .textContent
  ]));
}

<script type="worker-script">
  postMessage(navigator.toString()); // "[object WorkerNavigator]"
  postMessage(navigator.geolocation); // undefined
</script>

You can not use the Geolocation API from within a Worker.
But since this API is async, I'm not sure why you'd want to execute it from a Worker anyway.

Web Worker for GPS location not returning vales from worker script

1 Answers