Question

I have the following JS to display the current user's Zipcode in #zip:

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

I also have a JS function to reload the page:

$('.reload').click(function(){
    window.location.reload(true);
});

In Mobile Safari, these two functions work together well. If the user opens the webpage, it will load the user's current zipcode. Then, if the user changes locations, the user can reload the page by tapping the botton. This works fine, except when <meta name="apple-mobile-web-app-capable" content="yes"> is present.

When it is present, this what happens:

  1. User taps the icon on their home screen
  2. Webpage opens, with the address bar hidden, as <meta name="apple-mobile-web-app-capable" content="yes"> does this
  3. Zipcode loads like it should
  4. User moves location, taps the reload button
  5. Page fails to show the zipcode, with no erros logged to the console

I'm really stuck on how to fix this, but if this helps at all, here's a working example:

http://www.codekraken.com/testing/zipper/zip.html

Was it helpful?

Solution

There is no reload in full-screen web apps (using apple-mobile-web-app-capable). However, when the user changes location, and then runs the app again, it will always load the page. It won't fire the reload event, but it will fire the onload event - every time it runs.

If the user leaves the app running and changes location, you'll need a simple "find me again" function that simply reruns your code to find the current location and zipcode.

Now - HERE is a catch! I've found that on iOS, the position is often cached, even if you tell it to only use a fresh location, so sometimes, you'll get the old location. I created a workaround for this called getAccurateCurrentLocation() that uses a very similar interface. You can find the code at https://github.com/gwilson/getAccurateCurrentPosition - it's very simple to drop in as a replacement to getCurrentPosition().

That should do it.

OTHER TIPS

In case anyone else has confusion (as I had), the method involved here is the native "watchPosition" method of the geolocation object.

WatchPosition MDN Specs

The watchPosition method will be called when the user moves location, and you can specify your lat/long to zip generator as the callback.

From the specs:

    var watchID = navigator.geolocation.watchPosition(function(position) {
        do_something(position.coords.latitude, position.coords.longitude);
    });

so it looks like you could do:

    var watchID = navigator.geolocation.watchPosition(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);
                });
            }
        );
    });

which will accomplish even more simplicity -- the user will not have to tap the location button, it should already be updated as they move.

To be clear, Greg's function uses this watchPosition method, but if you want to understand what is at work, or use the much leaner native code and customize it yourself, watchPosition is your tool.

Fullscreen mode launches the browser in a WebSheet which might have a separate set of geolocation permissions. Maybe previously you declined to share the geolocation information in a WebSheet but allowed it in the Safari browser.

And if I recall correctly, WebSheets are known to reset their permissions from time to time and prompt the user again to allow reading geolocations every few hours.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top