IOS devices workaround?

[gavan1]

Hello all, this was a great effect while...while it worked on IOS devices.

I’m surprised there has been no comment on this being non-functional across all IOS devices.

[MrUltimate]

+1 Would like to know this as well

[iltimasd]

Hi all,

I'm working on a project right now, and managed to get DeviceMotion approval flow working.

this function must be triggered as a result of user interaction!!

This triggers a pop-up on iOS. Once the user grants permission, this library (and in theory all subsequent DeviceMotion calls) should work.

function clickHandler() {
try {
      //try block bc Safari
      if (typeof DeviceMotionEvent.requestPermission === "function") {
        DeviceMotionEvent.requestPermission()
          .then((permissionState) => {
            if (permissionState === "granted") {
              window.addEventListener("devicemotion", (e) => {
                console.log(e);
              });
            }
          })
          .catch(console.error);
      } else {
        // handle regular non iOS 13+ devices
      }
    } catch (e) {}
}

I threw in the try block because Safari of all browsers fails to call DeviceMotionEvent iirc

I don't have the moment to test but you might be able to get away with just calling DeviceMotionEvent.requestPermission()

[ABTOCTOnOM-no-0I0A3E-CHA]

IOS requires set request to the gesture. I solved it trough click gesture:

import { ShowError } from '@/services/notification-service';

interface DeviceOrientationEventiOS extends DeviceOrientationEvent {
    requestPermission?: () => Promise<'granted' | 'denied'>;
}

export const EnableGestures = () => {
    const onClick = () => {
        if (typeof window !== 'undefined') {
            const requestPermission = (
                DeviceOrientationEvent as unknown as DeviceOrientationEventiOS
            ).requestPermission;

            if (requestPermission && typeof requestPermission === 'function') {
                requestPermission().catch((err) => {
                    ShowError('Permission request failed');
                });
            }
        }
    };

    return (
        <button type="button" onClick={() => onClick()}>
            Enable gestures
        </button>
    );
};