Javascript not Requesting Accelerometer Permissions Properly iOS

Question

My website is trying to request accelerometer permissions. The main issue I am facing is that accelerometer permissions only work part of the time. Many times, the user is never prompted for permissions so nothing happens. I know currently the website uses a button to prompt asking the user but I would also like to change this to simply be on page load. Any help would be appreciated!

<!DOCTYPE html>
<html>

<head>
    <title>Accelerometer Data</title>
</head>

<body>
    <script>
        function handlePermission() {
            if (typeof DeviceMotionEvent !== 'undefined' && typeof DeviceMotionEvent.requestPermission === 'function') {
                DeviceMotionEvent.requestPermission()
                    .then(permissionState => {
                        if (permissionState === 'granted') {
                            window.addEventListener('devicemotion', handleMotionEvent);
                        } else {
                            document.getElementById("centertext").innerHTML = "Permission denied";
                        }
                    })
                    .catch(error => {
                        console.error('An error occurred while requesting motion sensor permission:', error);
                    });
            } else {
                document.getElementById("centertext").innerHTML = "Accelerometer not supported";
            }
        }

        function handleMotionEvent(event) {
            var x = event.accelerationIncludingGravity.x;
            var y = event.accelerationIncludingGravity.y;
            var z = event.accelerationIncludingGravity.z;
            var r = event.rotationRate;
            document.getElementById("centertext").innerHTML = html;
            if (z >= 7) {
                if (state === "correct") {
                    document.getElementById("centertext").innerHTML = "Correct";
                    document.getElementById("green").style.opacity = "1";
                } else {
                    state = "correct"
                    document.getElementById("centertext").innerHTML = "Correct";
                    document.getElementById("green").style.opacity = "1";
                }
            } else if (z <= -7) {
                if (state === "skip") {
                    document.getElementById("centertext").innerHTML = "Skip";
                    document.getElementById("red").style.opacity = "1";
                } else {
                    state = "skip"
                    document.getElementById("centertext").innerHTML = "Skip";
                    document.getElementById("red").style.opacity = "1";
                }
            } else if (z > -7 && z < 7) {
                if (state === "middle") {
                    document.getElementById("centertext").innerHTML = randomElement;
                    document.getElementById("red").style.opacity = "0";
                    document.getElementById("green").style.opacity = "0";
                } else {
                    state = "middle"
                    randomElement = card[Math.floor(Math.random() * card.length)];
                    document.getElementById("centertext").innerHTML = randomElement;
                    document.getElementById("red").style.opacity = "0";
                    document.getElementById("green").style.opacity = "0";
                }
            } else {
                var html = "x: " + x + "<br>y: " + y + "<br>z: " + z;
            }
        }

        function requestDeviceMotionPermissions() {
            if (typeof DeviceMotionEvent !== 'undefined' && typeof DeviceMotionEvent.requestPermission === 'function') {
                DeviceMotionEvent.requestPermission()
                    .then(permissionState => {
                        if (permissionState === 'granted') {
                            window.addEventListener('devicemotion', handleMotionEvent);
                        } else {
                            console.log('Motion sensor permission denied by the user.');
                        }
                    })
                    .catch(error => {
                        console.error('An error occurred while requesting motion sensor permission:', error);
                    });
            } else {
                console.log('Motion sensor API is not supported in this browser.');
            }
        }

        document.addEventListener('DOMContentLoaded', requestDeviceMotionPermissions);

    </script>

    <button onclick="handlePermission()">Request Accelerometer Permission</button>
</body>

</html>

Javascript not Requesting Accelerometer Permissions Properly iOS

0 Answers0