Unable to check DeviceOrientationEvent

Question

Hello there

With iOS12.2+ Apple changed the way to access DeviceOrientation and DeviceMotion in Safari: The user must first do any gesture (click button, swipe, etc.) in order to get asked if he wants to allow DeviceOrientation or DeviceMotion. In my Web-App (Javascript) I want the user to be able to locate himself on a map (GPS located game). It's fine Apple implemented more security for the user. I've found a code snipped that I made working and that will be executed when the user presses a specific button "Request Orientation" (user gesture):

function requestDeviceOrientation () {
  if (typeof DeviceOrientationEvent !== 'undefined' && typeof DeviceOrientationEvent.requestPermission === 'function') {
  DeviceOrientationEvent.requestPermission()
  .then(permissionState => {
  if (permissionState === 'granted') {
  window.addEventListener('deviceorientation', () => {});
  }
  })
  .catch(console.error);
  } else {
  // handle regular non iOS 13+ devices
  console.log ("not iOS");
  }
}

It seems that the Safari browser caches the users answer on this (granted, denied). On reloading the page the permission (granted, denied) is still cached. In such a case it makes no sense to display the request button again. So therefore I need to know if the permission was already granted or not in order to display the button (or not). So far I don't see any possiblity how to check if the permission is already set or not (f.e. in the ready function after loading page). That way I'm forced to always display the button "Request Orientation" whether the permission is already given or not.

It looks like to me that the Safari developers were not thinking to the end here. So my question is: Anyone knows how I can check if the permission is already set (granted, denied)?

Thank you!

WebKit

6.0k

Posted by

tygoesmac

Reply

Yes, likewise.

—
MR_man0

Add a Comment

Answer 1

I’m looking for the same thing right now.

At the moment I’ve managed to find a hack which makes it a little more seamless for users who have given permission:
add an event that runs once to deviceorientation and see if it runs within a small time window. If it does, then you know you have access to the event, if it doesn’t then show the button to ask for permission.

I have not, however, found even a hack to check if the permission has previously been denied so users who have denied access will always get the annoying permissions dialogue, despite the fact that they can’t give permission anymore even if they want to.

Posted by

brook288

Add a Comment

Answer 2

Same issue here.

I have an cordova-angular app with navigation and compass integration. Sadly, the new flow for iOS 13 really breaks the UX.

I keep asking premission every time the app opens and the user push "start navigation" for the first time (over and over again).

✓ KEEP TRACK ON PREMISSIONS :I have a varibale named 'compass: number' that starts as null and gets a value after premission granted. when 'compass === null' - that's how i nknow to ask premission again

X HAVE A CUSTOME PREMISSION DIALOG: dialog always asks ' "localhost" would like to access... '. Not very intuitive, I wish I could at least state my app name (in Hebrew).

if (typeof DeviceOrientationEvent['requestPermission'] === 'function') {
  DeviceOrientationEvent['requestPermission']()
  .then(permissionState => {
  if (permissionState === 'granted') {
  window.addEventListener('deviceorientation', (event) => {
  // console.log('=====');
  // console.log(event);
  this.currentCompass$.next(event['webkitCompassHeading']);
  });
  }
  })
  .catch(console.error);
} else {
  if (this.globals.iphone) {
  window.addEventListener('deviceorientation', (event) => {
  this.currentCompass$.next(event['webkitCompassHeading']);
  });
  } else {
  window.addEventListener('deviceorientationabsolute', (event) => {
  this.currentCompass$.next(360 - Math.round(event['alpha']));
  }, true);
  }
}

Posted by

arielhasidim

Add a Comment

Answer 3

This was trickier to solve than I expected, so make sure:

you host from an https address
your gesture to ask for permission should be directly triggered by a 'click' or a 'touchend' (not a 'touchstart'; I wasted so much time ignoring this detail)

I hope that helps somebody else.

Posted by

bunnybones

Add a Comment

Answer 4

I also have the same issue like you, @arielhasidim. Did you manage to change the dialog text somehow?

Current Dialog:

"localhost" would like to access...

I'm trying to achieve this:

"App Name" instead of "localhost"
Change the text to the user's local language (German, by example)

Posted by

stefanamport

Add a Comment

Answer 5

Thanks @bunnybones. You save my day. I use the godamn 'touchstart' and nothing works. By the way, is there other way to replace the button such as a dialog box to get the permission?

Posted by

KirFrank

Hello @KirFrank. I know it's been a year or so, but did you find a way to change the dialog box? Is it possibile?

Thank you so much.

—
novisgames

Add a Comment

Unable to check DeviceOrientationEvent

Replies