Background
Since iOS 12.2, Apple decided that for privacy reasons, the in-browser access to the device motion and orientation events is off by default. And now maybe they realized this might be a mistake, so in iOS 13 they changed the permission request behavior similar to how the camera permission is requested.
So now when we try to addEventListener
to devicemotion
or deviceorientation
, we would see this warning in the console:
To request permission, we would just need to call a method on the DeviceMotionEvent
or DeviceOrientationEvent
: requestPermission
😂 It would return a promise that always resolve to a PermissionState
which could be granted
or denied
(so basically Promise<'granted'|'denied'>
).
One more thing
One more thing to keep in mind is that requestPermission
could only be called on a user gesture (e.g. click). This is reasonable UX too as we would want to tell users why we are asking for such permissions and let them confirm before prompting them so that they see it coming.
Otherwise you would get this error:
The code to copy
For devicemotion
events:
function onClick() {
// feature detect
if (typeof DeviceMotionEvent.requestPermission === 'function') {
DeviceMotionEvent.requestPermission()
.then(permissionState => {
if (permissionState === 'granted') {
window.addEventListener('devicemotion', () => {});
}
})
.catch(console.error);
} else {
// handle regular non iOS 13+ devices
}
}
and for deviceorientation
events:
function onClick() {
// feature detect
if (typeof DeviceOrientationEvent.requestPermission === 'function') {
DeviceOrientationEvent.requestPermission()
.then(permissionState => {
if (permissionState === 'granted') {
window.addEventListener('deviceorientation', () => {});
}
})
.catch(console.error);
} else {
// handle regular non iOS 13+ devices
}
}
That's it. Thank you for reading!
Top comments (5)
Should also mention that HTTPS is required to access both of these APIs
Do you know if its possible to check if permission has already been granted without a user event?
How can I customise the permission dialog?
Fantastic! Thank you so much, this helped with a threejs project I'm working on :)
How to remember the permission for DeviceOrientation? I need to ask it ever time after closing the browser and opening it again.