How to Request Device Motion and Orientation Permission in iOS 13

The Return of the Gyroscope

Lee Martin
2 min readSep 19, 2019

I’ve covered the issue of Apple turning device orientation and motion off by default since iOS 12.2 a few times on this Medium. Well, with iOS 13 finally reaching devices today, we now have a permission API we can use to gain access to these events, the same way we would the Camera or GPS. The permissions API is a known user pattern and it works great. 👍🏻

Integrating this into your web app couldn’t be simpler. Just be sure to call the associated requestPermission() method from a click event.

Here’s the code for devicemotion events:

DeviceMotionEvent.requestPermission()
.then(response => {
if (response == 'granted') {
window.addEventListener('devicemotion', (e) => {
// do something with e
})
}
})
.catch(console.error)

And the equivalent for deviceorientation events:

DeviceOrientationEvent.requestPermission()
.then(response => {
if (response == 'granted') {
window.addEventListener('deviceorientation', (e) => {
// do something with e
})
}
})
.catch(console.error)

Simple enough. If you’re planning on providing fallbacks for non iOS 13 devices, you can simple check to see if the requestPermission method exists with a typeof call. Just swap DeviceMotionEvent with DeviceOrientationEvent as needed.

if (typeof DeviceMotionEvent.requestPermission === 'function') {
// iOS 13+
} else {
// non iOS 13+
}

I can’t wait to revisit my knighting app.

Thanks for reading!

Sign up to discover human stories that deepen your understanding of the world.

Free

Distraction-free reading. No ads.

Organize your knowledge with lists and highlights.

Tell your story. Find your audience.

Membership

Read member-only stories

Support writers you read most

Earn money for your writing

Listen to audio narrations

Read offline with the Medium app

Written by Lee Martin

Netmaker. Playing the Internet in your favorite band for two decades. Previously Silva Artist Management, SoundCloud, and Songkick.

Responses (9)

What are your thoughts?

Thanks for the writeup but this doesn’t seem to work. I’m getting immediate denials on iOS 13 Safari. It seems others are having similar issues. Any idea why the code here returns an immediate “denied” response without a prompt? https://codepen.io/ejarnutowski/pen/WNePqmM
Thank you!

--

Thanks, the script works fine, but can you hide the button from a user who has already accepted the use of the api?
thanks you

--

You may check working example here http://elegant-dryosaurus.glitch.me
Author, much thank for solution.

--