Get motion and orientation access on iOS 13 devices using Angular

3 min readNov 11, 2019

From the release of iOS 12.2, Apple have disabled the default access to device motion and orientation for browsers.

This decision may have been made as a security constraint because many websites out there have unrestricted access to device motions and other sensors data.

If your application is depending on such data then you have to deal with fixing it.

I struggled quite some time to make gyroscope work as expected for my application on iOS 13 devices, then I found a way to make it work (Thanks to Lee Martin & Wenchen Li ), hopefully this will help you also.

How to get motion & orientation back on iPhone?

You can assist users by using popup to go into settings option of browser and enable the motion and orientation access.

and another way is,

2. You can request permission to the user from your application by writing the code, mostly while dealing with iOS 13 devices.

I am using approach #2 with Angular project.

After doing some R&D on this, I observed that the following code will execute only if the website which is requesting permission is serving on HTTPS because then only DeviceMotionEvent and requestPermission() can be found on window object.

requestPermission() should be called on some event like Click event, It does not work on constructor, ngOnInit (Lifecycle hook of angular ) or page reload event , so use a click event and it will work as expected.

I have created one transparent overlay on the screen which will be only visible on iOS 13 devices and when user tap on the screen first time then the function is executed and permissions are requested.

Depends on your requirement you can skip the overlay part and simply execute function on click event of button or any other HTML element.

Create one transparent overlay on top of the screen with below HTML & CSS.

HTML Code

*ngIf will make sure to render this overlay only on iOS devices

click event will trigger the method for requesting permission.

ngClass will apply the ‘hide’ class based on ‘overlayClicked’ is true.

Overlay must be removed after permissions are requested otherwise it will block user experience with touch events.

CSS Code

Typescript Code

and that’s it, you are ready to go.