4

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

3 Answers 3

4
+50

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.

6
  • Finally! How would I code a "find me again" type function? I mean I suppose I could attach the script to a button click, instead of on page load? And all I would need to do is link to that script, and replace getCurrentPosition() with getAccurateCurrentLocation()?
    – Charlie
    Aug 16, 2012 at 22:47
  • Hey Charlie - the onload event should work but I would also bind it to a button click/touch so the user can update it with the app still up. Aug 16, 2012 at 23:59
  • Could you post an example of binding it to a button/onload? I tried attempting this before, but I could only figure out how to run it on page load or on button click, not both. I'll accept this as an answer and award you the bounty, however, as I think we're getting somewhere :D
    – Charlie
    Aug 17, 2012 at 1:22
  • So I'd just change getCurrentPosition() with getAccurateCurrentLocation(), and it's already set to onload?
    – Charlie
    Aug 17, 2012 at 2:23
  • Little bit of an update. I tried the code from that gist, and it doesn't work. It doesn't produce any errors in the console, but pressing the button (with the correct ID) or loading the page doesn't show the zipcode. An example can be found here: codekraken.com/testing/zipper/zip.html
    – Charlie
    Aug 17, 2012 at 3:25
0

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.

-2

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.

1
  • Thanks for the input, but this doesn't really solve the problem. If this is true, about the permissions thinking it was declined, then how can I request them again on page load? Ex.) user loads page, page prompts for allowing/disallowing geolocation if geolocation was previous set to deny
    – Charlie
    Aug 8, 2012 at 0:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.