Make dialog to call DeviceMotionEvent.requestPermission in iOS 13+

8th wall dialog is a good example to follow (open link on iOS 13)

https://apps.8thwall.com/8w/jini/

requestPermision has to be called in a handler triggered by a user gesture

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

[dav1app]

So, here is what I think:

The DeviceMotion permission is something that the developer using the platform should deal with. It means that aframe itself should not be responsible to make this request.

Although, I think that we should do add the banner as an option to be inserted when aframe loads and use it in the exemples provided. This will help developers to get things done.

I’ve done this, based on the home website. I’m also making the IOS 12 version, with the step-by-step on how enable it.

Here is the code (still polishing): https://codepen.io/davimello28/pen/MWWOKar

For the lazy productive developers

Here is a full working exemple:

window.onload = function () {

  // Check if is IOS 13 when page loads.
  if ( window.DeviceMotionEvent && typeof window.DeviceMotionEvent.requestPermission === 'function' ){

      // Everything here is just a lazy banner. You can do the banner your way.
      const banner = document.createElement('div')
      banner.innerHTML = `<div style="z-index: 1; position: absolute; width: 100%; background-color:#000; color: #fff"><p style="padding: 10px">Click here to enable DeviceMotion</p></div>`
      banner.onclick = ClickRequestDeviceMotionEvent // You NEED to bind the function into a onClick event. An artificial 'onClick' will NOT work.
      document.querySelector('body').appendChild(banner)
  }
}


function ClickRequestDeviceMotionEvent () {
  window.DeviceMotionEvent.requestPermission()
    .then(response => {
      if (response === 'granted') {
        window.addEventListener('devicemotion',
          () => { console.log('DeviceMotion permissions granted.') },
          (e) => { throw e }
      )} else {
        console.log('DeviceMotion permissions not granted.')
      }
    })
    .catch(e => {
      console.error(e)
    })
}

[dmarcos]

Fixed by https://github.com/aframevr/aframe/pull/4303