Use JavaScript CustomEvent to clean up JS code

dotnet · Jul 8, 2024 · e12fdd9 · e12fdd9
1 parent 45870b4
commit e12fdd9
Show file tree

Hide file tree

Showing 5 changed files with 61 additions and 80 deletions.
diff --git a/src/Controls/samples/Controls.Sample/Resources/Raw/HybridSamplePage/index.html b/src/Controls/samples/Controls.Sample/Resources/Raw/HybridSamplePage/index.html
@@ -5,69 +5,25 @@
     <meta charset="utf-8" />
     <title></title>
     <link rel="stylesheet" href="styles/app.css">
+    <script src="scripts/HybridWebView.js"></script>
     <script>
-        function SendRawMessageToCSharp() {
-
-            var message = "Message from JS!";
-
-            if (window.chrome && window.chrome.webview) {
-                // Windows WebView2
-                window.chrome.webview.postMessage(message);
-            }
-            else if (window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers.webwindowinterop) {
-                // iOS and MacCatalyst WKWebView
-                window.webkit.messageHandlers.webwindowinterop.postMessage(message);
-            }
-            else {
-                // Android WebView
-                hybridWebViewHost.sendMessage(message);
-            }
-
-        }
-
-        function ReceiveRawMessageFromCSharp(message) {
-            var messageFromCSharp = document.getElementById("messageFromCSharp");
-            messageFromCSharp.value += '\r\n' + message;
-        }
-
-        if (window.chrome && window.chrome.webview) {
-            // Windows WebView2
-            window.chrome.webview.addEventListener('message', arg => {
-                ReceiveRawMessageFromCSharp(arg.data);
-                setTimeout(() => {
-                    document.getElementById("browsertype").innerText = "WebView2";
-                }, 0);
-            });
-        }
-        else if (window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers.webwindowinterop) {
-            // iOS and MacCatalyst WKWebView
-            window.external = {
-                "receiveMessage": message => {
-                    ReceiveRawMessageFromCSharp(message);
-                }
-            };
-            setTimeout(() => {
-                document.getElementById("browsertype").innerText = "iOS/MacCat WKWebView";
-            }, 0);
-        }
-        else {
-            // Android WebView
-            window.addEventListener('message', arg => {
-                ReceiveRawMessageFromCSharp(arg.data);
+        window.addEventListener(
+            "HybridWebViewMessageReceived",
+            function (e) {
+                var messageFromCSharp = document.getElementById("messageFromCSharp");
+                messageFromCSharp.value += '\r\n' + e.detail.message;
             });
-            setTimeout(() => {
-                document.getElementById("browsertype").innerText = "Android WebView";
-            }, 0);
-        }
 
-    </script>
+
+        window.addEventListener("HybridWebViewMessageReceived", (e) => console.log(e));
+        </script>
 </head>
 <body>
     <div>
-        Hybrid sample! <span id="browsertype">not set</span>
+        Hybrid sample!
     </div>
     <div>
-        <button onclick="SendRawMessageToCSharp()">Send message to C#</button>
+        <button onclick="window.HybridWebView.SendRawMessage('Message from JS!')">Send message to C#</button>
     </div>
     <div>
         Message from C#: <textarea readonly id="messageFromCSharp" style="width: 80%; height: 10em;"></textarea>

diff --git a/src/Controls/samples/Controls.Sample/Resources/Raw/HybridSamplePage/scripts/HybridWebView.js b/src/Controls/samples/Controls.Sample/Resources/Raw/HybridSamplePage/scripts/HybridWebView.js
@@ -0,0 +1,48 @@
+function HybridWebViewInit() {
+
+    function DispatchHybridWebViewMessage(message) {
+        const event = new CustomEvent("HybridWebViewMessageReceived", { detail: { message: message } });
+        window.dispatchEvent(event);
+    }
+
+    if (window.chrome && window.chrome.webview) {
+        // Windows WebView2
+        window.chrome.webview.addEventListener('message', arg => {
+            DispatchHybridWebViewMessage(arg.data);
+        });
+    }
+    else if (window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers.webwindowinterop) {
+        // iOS and MacCatalyst WKWebView
+        window.external = {
+            "receiveMessage": message => {
+                DispatchHybridWebViewMessage(message);
+            }
+        };
+    }
+    else {
+        // Android WebView
+        window.addEventListener('message', arg => {
+            DispatchHybridWebViewMessage(arg.data);
+        });
+    }
+}
+
+window.HybridWebView = {
+    "SendRawMessage": function (message) {
+
+        if (window.chrome && window.chrome.webview) {
+            // Windows WebView2
+            window.chrome.webview.postMessage(message);
+        }
+        else if (window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers.webwindowinterop) {
+            // iOS and MacCatalyst WKWebView
+            window.webkit.messageHandlers.webwindowinterop.postMessage(message);
+        }
+        else {
+            // Android WebView
+            hybridWebViewHost.sendMessage(message);
+        }
+    }
+}
+
+HybridWebViewInit();
diff --git a/src/Core/src/Handlers/HybridWebView/HybridWebViewHandler.Android.cs b/src/Core/src/Handlers/HybridWebView/HybridWebViewHandler.Android.cs
@@ -165,10 +165,8 @@ public AndroidHybridWebViewClient(HybridWebViewHandler handler)
 					}
 				}
 
-				Stream? contentStream = null;
-
 				var assetPath = Path.Combine(_handler.HybridRoot!, relativePath!);
-				contentStream = PlatformOpenAppPackageFile(assetPath);
+				var contentStream = PlatformOpenAppPackageFile(assetPath);
 
 				if (contentStream is null)
 				{

diff --git a/src/Core/src/Handlers/HybridWebView/HybridWebViewHandler.Windows.cs b/src/Core/src/Handlers/HybridWebView/HybridWebViewHandler.Windows.cs
@@ -107,15 +107,8 @@ private async void CoreWebView2_WebResourceRequested(CoreWebView2 sender, CoreWe
 					}
 				}
 
-				Stream? contentStream = null;
-
-				//contentStream = KnownStaticFileProvider.GetKnownResourceStream(relativePath!);
-
-				//if (contentStream is null)
-				//{
 				var assetPath = Path.Combine(VirtualView.HybridRoot!, relativePath!);
-				contentStream = await GetAssetStreamAsync(assetPath);
-				//}
+				var contentStream = await GetAssetStreamAsync(assetPath);
 
 				if (contentStream is null)
 				{

diff --git a/src/Core/src/Handlers/HybridWebView/HybridWebViewHandler.iOS.cs b/src/Core/src/Handlers/HybridWebView/HybridWebViewHandler.iOS.cs
@@ -231,20 +231,6 @@ public async void StartUrlSchemeTask(WKWebView webView, IWKUrlSchemeTask urlSche
 						}
 					}
 
-					// Stream? contentStream = null;
-
-					// if (contentStream == null)
-					// {
-					//     contentStream = KnownStaticFileProvider.GetKnownResourceStream(relativePath!);
-					// }
-
-					// if (contentStream is not null)
-					// {
-					//     using var ms = new MemoryStream();
-					//     contentStream.CopyTo(ms);
-					//     return (ms.ToArray(), contentType, StatusCode: 200);
-					// }
-
 					var assetPath = Path.Combine(bundleRootDir, relativePath);
 
 					if (File.Exists(assetPath))