WebGL for Windows

example/App.tsx

@@ -17,8 +17,17 @@ import Downloads from './examples/Downloads';
 import Uploads from './examples/Uploads';
 import Injection from './examples/Injection';
 import LocalPageLoad from './examples/LocalPageLoad';
+import WebGL from './examples/WebGL';
 
 const TESTS = {
+  WebGL: {
+    title: 'WebGL',
+    testId: 'webgl',
+    description: 'WebGL for Windows',
+    render() {
+      return <WebGL />;
+    },
+  },
   Alerts: {
     title: 'Alerts',
     testId: 'alerts',
@@ -75,10 +84,17 @@ const TESTS = {
       return <LocalPageLoad />;
     },
   },
+  {Platform.OS === 'windows' && (
+    <Button
+      testID="testType_messaging"
+      title="WebGL"
+      onPress={() => this._changeTest('WebGL')}
+    />
+  )}
 };
 
 type Props = {};
-type State = {restarting: boolean, currentTest: Object};
+type State = {restarting: boolean; currentTest: Object};
 
 export default class App extends Component<Props, State> {
   state = {
@@ -90,7 +106,7 @@ export default class App extends Component<Props, State> {
     this.setState({restarting: true}, () => this.setState({restarting: false}));
   };
 
-  _changeTest = testName => {
+  _changeTest = (testName) => {
     this.setState({currentTest: TESTS[testName]});
   };
 
@@ -138,16 +154,20 @@ export default class App extends Component<Props, State> {
             title="LocalPageLoad"
             onPress={() => this._changeTest('PageLoad')}
           />
-          {Platform.OS == "ios" && <Button
-            testID="testType_downloads"
-            title="Downloads"
-            onPress={() => this._changeTest('Downloads')}
-          />}
-          {Platform.OS === 'android' && <Button
-            testID="testType_uploads"
-            title="Uploads"
-            onPress={() => this._changeTest('Uploads')}
-          />}
+          {Platform.OS == 'ios' && (
+            <Button
+              testID="testType_downloads"
+              title="Downloads"
+              onPress={() => this._changeTest('Downloads')}
+            />
+          )}
+          {Platform.OS === 'android' && (
+            <Button
+              testID="testType_uploads"
+              title="Uploads"
+              onPress={() => this._changeTest('Uploads')}
+            />
+          )}
         </View>
 
         {restarting ? null : (

windows/ReactNativeWebView/ReactWebView.cpp

@@ -62,6 +62,13 @@ namespace winrt::ReactNativeWebView::implementation {
                     self->OnScriptNotify(sender, args);
                 }
             });
+    
+         m_permissionReguestRevoker = m_webView.PermissionRequested(
+            winrt::auto_revoke, [ref = get_weak()](auto const& sender, auto const& args) {
+                if (auto self = ref.get()) {
+                    self->OnPremissionRequested(sender, args);
+                }
+        });
     }
 
     void ReactWebView::WriteWebViewNavigationEventArg(winrt::IJSValueWriter const& eventDataWriter) {
@@ -132,6 +139,16 @@ namespace winrt::ReactNativeWebView::implementation {
         PostMessage(winrt::hstring(args.Value()));
     }
 
+    void ReactWebView::OnPremissionRequested(winrt::WebView const& webView, winrt::WebViewPermissionRequestedEventArgs const& args)
+    {
+      if (args.PermissionRequest().PermissionType() == WebViewPermissionType::ImmersiveView) {
+        // WebGL permission request
+        // https://docs.microsoft.com/en-us/microsoft-edge/webvr/webvr-in-webview
+        args.PermissionRequest().Allow();
+      }
+      args.PermissionRequest().Deny();
+    }
+
     void ReactWebView::PostMessage(winrt::hstring const& message) {
         m_reactContext.DispatchEvent(
             m_webView,

windows/ReactNativeWebView/ReactWebView.h

@@ -22,6 +22,7 @@ namespace winrt::ReactNativeWebView::implementation {
         winrt::Windows::UI::Xaml::Controls::WebView::NavigationCompleted_revoker m_navigationCompletedRevoker{};
         winrt::Windows::UI::Xaml::Controls::WebView::NavigationFailed_revoker m_navigationFailedRevoker{};
         winrt::Windows::UI::Xaml::Controls::WebView::ScriptNotify_revoker m_scriptNotifyRevoker{};
+        winrt::Windows::UI::Xaml::Controls::WebView::PermissionRequested_revoker m_permissionReguestRevoker{};
 
         void RegisterEvents();
         void WriteWebViewNavigationEventArg(winrt::Microsoft::ReactNative::IJSValueWriter const& eventDataWriter);
@@ -29,6 +30,8 @@ namespace winrt::ReactNativeWebView::implementation {
         void OnNavigationCompleted(winrt::Windows::UI::Xaml::Controls::WebView const& sender, winrt::Windows::UI::Xaml::Controls::WebViewNavigationCompletedEventArgs const& args);
         void OnNavigationFailed(winrt::Windows::Foundation::IInspectable const& sender, winrt::Windows::UI::Xaml::Controls::WebViewNavigationFailedEventArgs const& args);
         void OnScriptNotify(winrt::Windows::Foundation::IInspectable const& sender, winrt::Windows::UI::Xaml::Controls::NotifyEventArgs const& args);
+        void OnPremissionRequested(winrt::Windows::UI::Xaml::Controls::WebView const& webView, winrt::Windows::UI::Xaml::Controls::WebViewPermissionRequestedEventArgs const& args);
+
     };
 } // namespace winrt::ReactNativeWebView::implementation