In iOS 12.1 and above, it is no longer possible to use these two events in browsers or webviews. Previously, you could directly listen to deviceorientation and easily obtain the device's tilt values, which could be applied to practical projects. For example, you could use the Extension Designer to write mobile extensions and create suitable mini-games on the mBlock mobile app using gravity sensing.
However, in version 12.1, the official default setting for Motion & Orientation settings is disabled. You can open the settings on an iPad or iPhone 12.1+ device and check if Motion & Orientation Access is enabled under settings - Safari - PRIVACY & SECURITY. In version 13, the official has hidden this option, so you can't find it anymore.
But don't worry, iOS 12.1+ provides DeviceMotionEvent.requestPermission()|DeviceOrientationEvent.requestPermission() to obtain motion and orientation permissions. When you call this, a system dialog will pop up to request permission. After the user allows it, you can listen to deviceorientation|devicemotion to solve the problem. You can also guide the user to click on the settings in the above image to enable it. However, this only applies to versions below 13, as the entry is no longer available in version 13.
For the actual handling code, you can refer to the example below.
const getDeviceOrientationEventPermission = function () {
if (DeviceOrientationEvent
&& DeviceOrientationEvent.requestPermission
&& typeof DeviceOrientationEvent.requestPermission === 'function'
) {
DeviceMotionEvent.requestPermission().then(permissionState => {
if(permissionState === "granted") {
window.addEventListener("devicemotion", function (e) {}, false);
} else if(permissionState === "denied") {
console.warn("User denied permission.");
}
});
}
if (DeviceOrientationEvent
&& DeviceOrientationEvent.requestPermission
&& typeof DeviceOrientationEvent.requestPermission === 'function'
) {
DeviceOrientationEvent.requestPermission().then(permissionState => {
if(permissionState === "granted") {
window.addEventListener("deviceorientation", function (e) {}, false);
} else if(permissionState === "denied") {
console.warn("User denied permission.");
}
});
}
}
Also, please note that the website that requires authorization must have a valid https certificate. Otherwise, when triggered, it will throw the error Call to requestPermission() failed, reason: Browsing context is not secure. You can directly debug the website opened in Safari on the iPad by entering DeviceOrientationEvent.requestPermission() to check if authorization is allowed. However, in actual applications, users still need to trigger permission acquisition actively, otherwise it will throw the error Unhandled Promise Rejection: NotAllowedError: Requesting device orientation or motion access requires a user gesture to prompt. You can directly open [baidu.com](http://baidu.com) to simulate it, for example, document.getElementById('s_logo').onclick = getDeviceOrientationEventPermission. This way, as long as you click outside the area, the authorization dialog will pop up normally. If the user cancels the authorization, you will find that no matter how you trigger it, the authorization window will not appear again, and only User denied permission. will be output. This is similar to the Chrome browser, where it can only pop up once, and the user can only authorize it in the settings afterwards.
Due to the strict usage of motion and orientation events in iOS 12.1+, it becomes very difficult to use this functionality in a webview. First, you cannot open the authorization window through getDeviceOrientationEventPermission. Therefore, if you want to use similar events in a webview, you not only need to obtain permission on the web side, but also need corresponding support on the native side. iOS 13 has added the DeviceMotionEvent and DeviceOrientation interfaces.
In summary, if users want to write mobile extensions in the Extension Designer and use motion and orientation events, it is actually impossible to achieve full device support. Therefore, it is necessary to make practical distinctions. When users use extensions, if their actual version is 12.1+, they need to be informed that this functionality cannot be used normally.
Reference links:
iOS13 にて javascript の devicemotion を取得する
Get device motion and orientation back on iOS 13