TIL Geolocation doesn’t work on mobile browsers

So, I’m working on a project to help people that are already “out” find a place to eat and as a part of it, there’s a feature to “find the nearest three places”. So, my initial thought was “that’s cool, I’ll just make a website and get it to use the Javascript Geolocation API” and make it available as a “web app” on people’s phones. This was wrong. It seems like the only real way to get reliable location data is to go “native”.

My initial approach was to figure out the “unknown unknowns”, starting off with “can we reliably get the users’ geolocation through the browser. The “proof of concept” code was as follows:

if ("geolocation" in navigator){
console.log("Geolocation available");
navigator.geolocation.getCurrentPosition(success, error);
else {
console.log("Geolocation NOT available");
function success(pos) {
var crd = pos.coords;
var lat = document.getElementById("latitude");
var longitude = document.getElementById("longitude");
var acc = document.getElementById("accuracy");
console.log('Your current position is:');
console.log(`Latitude : ${crd.latitude}`);
lat.innerHTML = crd.latitude;
console.log(`Longitude: ${crd.longitude}`);
longitude.innerHTML = crd.longitude;
console.log(`More or less ${crd.accuracy} meters.`);
acc.innerHTML = crd.accuracy;
function error(err) {
console.warn(`ERROR(${err.code}): ${err.message}`);
Hi there! Your location is:<br />
Latitude: <div id="latitude"></div><br />
Longitude: <div id="longitude"></div><br />
Accuracy: <div id="accuracy"></div><br />

view raw
hosted with ❤ by GitHub

Firstly, I tried opening the file in Firefox and was greeted by the “allow this site to view location data” prompt. I clicked “Allow”, no joy… the site did not display anything and examining the Javascript/Web console, showed my “Allow” click registering as a “Don’t allow”:

Screen Shot 2018-09-01 at 5.11.45 PM

After checking the network traffic tab as well as looking at and messing around with the “about:config”, I came to to the conclusion that Firefox is just disabling the location API (maybe because I’m running the Developer Edition or something). Running this test on Chrome showed the same initial behaviour (prompt to allow website access to location) however the data ended up being displayed (albeit a bit slow) so the Geolocation was working in Chrome at least.

I thought that maybe the issue was with Firefox not allowing location sharing unless the page was shared over HTTPS, so I moved onto the next stage, which was uploading the file to a web server enabled S3 bucket. Even when accessing the file over HTTPS, the same issue happened. I would click “allow” and the error message would come back saying “user has denied geolocation prompt”.

Next up was the all important mobile test (Safari on iOS). I tried loading the previously mentioned S3 website in Safari on iOS and…. nothing… no co-ordinates. After a bit of thinking, I remembered a previous project where a company with a very usable web app had released a “native” app, with a pretty flimsy reason (so we know when you park up in our shop car park). The speculation there was that they were using the location data all the time and having a native app is the only real way to do this. So… there it is, back to the drawing board.

If it is to be a mobile application, I’m inclined to try to build it using Flutter. But I don’t know… it’ll be my first go at mobile application development, so whatever it is, it’s going to be a learning curve.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.