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?

ThinkingStiff · Accepted Answer · 2012-07-17T00:02:32.780

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 );

edited Jul 17 '12 at 00:02

answered Jul 14 '12 at 06:39

ThinkingStiff

64,767
30
146
239

The HTML is just a div. This is not working at the most basic level. Ran from the home screen, your code works. – Charlie Jul 14 '12 at 15:29
@Charlie OK, if my sample works, then you know it's not location services. It must be something else in your Javascript. Strip away everything in steps until you find it. Remember that apps run from the home screen use a different Javascript engine, so it's common to see differences between it and mobile Safari. – ThinkingStiff Jul 14 '12 at 19:14
It's almost all stripped down though, how could I break it up even further? – Charlie Jul 16 '12 at 00:06
Both of the suggestions do display the zipcode from the home screen app, but then the second problem arrises: Trying to reload the page, which would have a real life scenario of wanting to recheck the zipcode if you moved to a new location, breaks the code, and won't display a zipcode at all. I'll reiterate if that's not clear enough, I'm too tired to tell haha. – Charlie Jul 16 '12 at 23:26
@Charlie So this solves your original question, "Do location services work in iOS apps?", and now you're having a new issue? – ThinkingStiff Jul 17 '12 at 00:03
I edited the post just after I posted it with the following sentence "This problem also occurs if the page is reloaded while run from the home screen" – Charlie Jul 17 '12 at 02:48

score 0 · Answer 2 · answered Jul 14 '12 at 01:10

0

Apple has it's own way to get localization for webApps. If you're in the iOS developer program, you definitively should look the official documentation.

Check this out: http://developer.apple.com/library/ios/#DOCUMENTATION/AppleApplications/Reference/SafariWebContent/GettingGeographicalLocations/GettingGeographicalLocations.html#//apple_ref/doc/uid/TP40002051-CH5-SW2

answered Jul 14 '12 at 01:10

Daniel

1,321
12
25

I'm trying to make this relatively cross device, and I don't want to use something that only works on the iPhone. From my understanding of my code, it works in other certain browsers, which I think I would lose if I went with this approach... – Charlie Jul 14 '12 at 01:13
And my code already uses `geolocation.getCurrentPosition` which is what it says to use in the document. – Charlie Jul 14 '12 at 01:16
I love jQuery, but I don't really understand it, as I learned to use it, not how it works. What I do when my code breaks it copy/paste it in a text editor and copy it back step by step. First, try just to print the coords. It might be a problem with the getJSON part – Daniel Jul 14 '12 at 02:10

iOS WebApp's don't allow location services?

2 Answers2