iOS WebApp's don't allow location services?

Question

I have the following JS which gets the current location of the user and displays their zipcode...

(function ($, geolocation) {
    if (geolocation) {
        geolocation.getCurrentPosition(function (position) {
            $.getJSON(
                "http://ws.geonames.org/findNearestAddressJSON?callback=?",
                {
                    lat : position.coords.latitude,
                    lng : position.coords.longitude
                },
                function (data) {
                    $(function () {
                        $('#zip').text(data.address.postalcode);
                    });
                }
            );
        });
    }
}(jQuery, navigator.geolocation));

_{Kindly helped on CodeReview, since my original code was pretty terrible, https://codereview.stackexchange.com/questions/13481/to-use-or-not-to-use-public-variables-in-javascript/13483#comment21844_13483}

HTML:

<div id="zip"></div>

...which then displays the zipcode in a div.

This works fine in Mobile Safari, along with desktop Safari, but as soon I add the apple-mobile-web-app-capable meta tag, the code breaks.

I had the code log to the console after each step, and it all ran smoothly in regular Safari and Mobile Safari. As soon as I added it to my home screen though (with the meta tag in the head), the app wouldn't even run the JS code. It didn't bother logging to the console either, which makes me wonder if location services are allowed in WebApps.

This problem also occurs if the page is reloaded while run from the home screen.

Is there anyway to fix this? Is this a common problem?

Answer 1

Yes, iOS web apps, using the apple-mobile-web-app-capable meta tag, allow location services through navigator.geolocation. You don't have an error callback, and that could give you a hint to the problem. Post your HTML for further analysis.

Try putting just this on a page (with apple-mobile-web-app-capable set):

navigator.geolocation.getCurrentPosition( function ( position ) {
    alert( 'yay!' );    
},
function ( error ) {
    alert( 'boo! error: ' + error.message );
} );

Based on your comment, this works, so it's not location services. Try changing the order of your parentheses on your last line.

} )( jQuery, window.navigator.geolocation );

Also, this looks a little weird, because the call to .text() would happen immediately, not when .getJSON() is complete:

function (data) {
    $(function () {
        $('#zip').text(data.address.postalcode);
    });
}

Try:

function (data) {
    $('#zip').text(data.address.postalcode);
}

So your final code should look like this:

( function ( $, geolocation ) {
    if (geolocation) {
        geolocation.getCurrentPosition( function ( position ) {
            $.getJSON(
                "http://ws.geonames.org/findNearestAddressJSON?callback=?",
                {
                    lat : position.coords.latitude,
                    lng : position.coords.longitude
                },
                function (data) {
                    $('#zip').text(data.address.postalcode);
                }
            );
        });
    }
} )( jQuery, window.navigator.geolocation );