When using the geolocation.getCurrentPosition API on mobile, tested iOS at the moment, users are prompted more than once through a session depending on the page. In comparison to as desktop site, such as Chrome on Windows 10, where once a user hits Allow they will no longer be prompted for permissions unless explicitly disabled. iOS Safari seems to be session based and then possibly page based within session?
Wondering if anyone knows if there are explicit rules defined by Apple for this permission check? Also does maximumAge play a role in how often the user is prompted?
const LOCATION_OPTIONS = {
timeout: 15000,
enableHighAccuracy: true,
maximumAge: 86400000,
};
useEffect(() => {
const { geolocation } = navigator;
// If the geolocation is not defined in the used browser we handle it as an error
if (!geolocation) {
setError("Geolocation is not supported.");
return;
}
// Call Geolocation API
geolocation.getCurrentPosition(handleSuccess, handleError, options);
}, [options]);
return { location, error };
Example NextJS CodeSandbox https://u11vn.sse.codesandbox.io/
Unfortunately, it seems there is no way to permanently grant website access to the iPhone privacy like camera location, within Safari. but on the user side, there are three options (Ask, Allow, Deny ) that can set
if you use JavaScript in iOS WKWebView, you can get a workaround that request location with App location API
if you use JavaScript on the web, well you cannot achieve this.
In the web do below / or use navigator with a popup dialog
var options = {
enableHighAccuracy: true,
timeout: 7000,
maximumAge: 0
};
function log(data) {
const tag = document.createElement('p');
tag.textContent = data;
document.body.appendChild(tag);
}
function success(pos) {
var crd = pos.coords;
console.log('Successfully determined a user position:', crd);
log('Your current position is:');
log(`Latitude : ${crd.latitude}`);
log(`Longitude: ${crd.longitude}`);
log(`More or less ${crd.accuracy} meters.`);
}
function error(err) {
console.warn(`ERROR(${err.code}): ${err.message}`);
}
navigator.geolocation.getCurrentPosition(success, error, options);
Or
$scope.watchId = navigator.geolocation.watchPosition(function (position) {
if ($scope.t1 == 0) {
$scope.t1 = position.timestamp;
} else {
if (Math.abs($scope.t1 - position.timestamp) > 5000) {
$scope.t1 = position.timestamp;
SellerRef.update({ Location: { Lat: position.coords.latitude, Long: position.coords.longitude } })
}
}
},
function (error) {
if (error.code == 1) {
$scope.showAlert("An error occured \n" + " Please goto Settings->Privacy->LocationServices and give permission for " + bowser.name + " which is your browser ");
}
}
);
For loading your web inside an app
webView, just add location permission descriptions to the info.plist file.NSLocationWhenInUseUsageDescription versus NSLocationAlwaysUsageDescription versus NSLocationUsageDescriptionWhat is the geolocation error, look here
navigator.geolocation.getCurrentPosition(success => {
/* Do some magic. */
}, failure => {
if (failure.message.startsWith("Only secure origins are allowed")) {
// Secure Origin issue.
}
});
Include/set an "required_features" option at manifest.webapp file:
{
"required_features": ["geolocation"]
}
User:
On iPhone:
Settings -> Location Services -> [your Browser] [apple ref][1]
Chrome requires https for geolocation usage
Check, user's OPERATING SYSTEM and BROWSER BOTH have location services enabled, user's browser supports checking for location services
// options for current position
const navigatorLocationOptions = {
enableHighAccuracy: true,
timeout: 7000,
maximumAge: 0
};
// does browser have geo services enabled
navigator.permissions.query({name:'geolocation'})
.then((result) => {
if (result.state === 'granted') {// you are good
navigator.geolocation.getCurrentPosition(position => {
console.log('granted user location permission', position );
//.. do your stuff
}, (error) => {
// OS services are not enabled
console.log('Please turn on OS located services', navigator);
errorLocation();
}, navigatorLocationOptions);
} else {
// browser issues seriveces
console.log('Browser location services disabled', navigator);
errorLocation();
}
}, (error) => {
/* Browser doesn't support querying for permissions */
console.log('Please turn on BROWSER location services', navigator);
errorLocation()
}
);
//handle errors
function errorLocation() {
...
}