web-dev-qa-db-fra.com

Comment faire fonctionner DeviceOrientationEvent et DeviceMotionEvent sur Safari?

J'essaie d'implémenter DeviceOrientationEvent et DeviceMotionEvent sur mon site Web pour un effet 3D. Cependant, la console n'enregistre aucune information et apparemment iOS 13 nécessite une autorisation définie par l'utilisateur pour commencer à le faire. Je n'arrive pas à comprendre comment le configurer correctement.

J'ai fait quelques recherches et voici ce que j'ai trouvé: https://github.com/w3c/deviceorientation/issues/57#issuecomment-498417027

Toutes les autres méthodes fournies en ligne ne sont malheureusement plus utilisables.

window.addEventListener('deviceorientation', function(event) {
    console.log(event.alpha + ' : ' + event.beta + ' : ' + event.gamma);
});

Je reçois le message d'erreur suivant:

[Avertissement] Aucun événement de mouvement ou d'orientation de l'appareil ne sera déclenché tant qu'une autorisation n'aura pas été demandée et accordée.

javascriptsafarimobile-safaridevice-orientationdevicemotion
7
Siemen Gijbels

Sur Xamarin iOS (Xamarin.Forms), vous pouvez injecter le script de demande d'autorisation avec la méthode EvaluateJavaScript sur WkWebView lorsqu'il est prêt:

webView.EvaluateJavaScript("DeviceMotionEvent.requestPermission().then(response => { if (response == 'granted') {window.addEventListener('devicemotion', (e) => {})}}).catch(console.error)");

Si vous utilisez un moteur de rendu WkWebView personnalisé (doit implémenter IWKUIDelegate si ce bogue existe toujours https://bugs.webkit.org/show_bug.cgi?id=203287 ) le script peut être injecté lors de la configuration de la vue Web contrôle dans OnElementChanged

Exemple:

// do this when setting up the webview control in OnElementChanged
                //enable device motion sensors permission script:
                //https://medium.com/flawless-app-stories/how-to-request-device-motion-and-orientation-permission-in-ios-13-74fc9d6cd140
                var source =
                "function requestSensorPermission() {" +
                "   if (typeof(DeviceMotionEvent) !== 'undefined' && typeof(DeviceMotionEvent.requestPermission) === 'function') {" +
                "       DeviceMotionEvent.requestPermission() .then(response => {" +
                "           if (response == 'granted') { " +
                "               window.addEventListener('devicemotion', (e) => { })" +
                "           }" +
                "       }).catch(console.error)" +
                "   }" +
                "}";
                var script = new WKUserScript(new NSString(source), WKUserScriptInjectionTime.AtDocumentEnd, true);
                wkWebView.Configuration.UserContentController.AddUserScript(script);

Ensuite, vous pouvez appeler yourCustomWebView . EvaluateJavaScript ("requestSensorPermission ()") dans votre code derrière quand yourCustomWebView est prêt.

EvaluateJavaScript: https://docs.Microsoft.com/en-us/dotnet/api/webkit.wkwebview.evaluatejavascript?view= xamarin-ios-sdk-12

Rendu WkWebView personnalisé: https://docs.Microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/ custom-renderer/hybridwebview # create-the-custom-renderer-on-ios

0
TouchBoarder