Geek Answers Handbook

Geolocation not working with apple-mobile-web-app-able?

I have the following JS to display the current custom 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 features work well. If the user opens a web page, he will download the current zip code of the user. Then, if the user changes places, the user can reload the page by clicking on botton. This works fine unless <meta name="apple-mobile-web-app-capable" content="yes"> present.

When it is present, this happens:

  • The user deletes the icon on his home screen.
  • A webpage opens with a hidden address bar, as <meta name="apple-mobile-web-app-capable" content="yes"> does it
  • Zipcode loads properly
  • User moves location, removes reset button
  • The page cannot show zipcode, without registering erros on the console

I am really fixated on how to fix this, but if that helps at all, here is a working example:

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

+4
source share
3 answers

In fullscreen web applications (using apple-mobile-web-app-support) there is no reboot. However, when the user changes the location and starts the application again, he always loads the page. It will not fire a reload event, but it will fire an onload event - every time it fires.

If the user leaves the application and changes the location, you will need a simple “find me again” function, which simply restarts your code to find the current location and zip code.

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

That should do it.

+4
source

In case someone has confusion (like mine), the method used here is the own "watchPosition" method of the geolocation object.

Specifications WatchDosition MDN

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

From the specifications:

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

so that it looks like this:

  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 achieve even greater simplicity - the user will not need to press the location button, it must be updated as they move.

To be clear, the Greg function uses this watchPosition method, but if you want to understand what works, or use very lean native code and configure it yourself, watchPosition is your tool.

0
source

Full screen mode launches the browser in WebSheet, which can have a separate set of geolocation permissions. You may have previously refused to share geolocation information in WebSheet, but allowed it in the Safari browser.

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

-2
source

More articles:


All Articles