Replace JavaScript with latest version. (#2502)

dotnet · Sep 17, 2024 · 48a9b0e · 48a9b0e
1 parent 71e52cc
commit 48a9b0e
Showing 1 changed file with 63 additions and 33 deletions.
diff --git a/docs/user-interface/controls/hybridwebview.md b/docs/user-interface/controls/hybridwebview.md
@@ -2,7 +2,7 @@
 title: HybridWebView
 description: Learn how to use a HybridWebView to host HTML/JS/CSS content in a WebView, and communicate between that code and .NET.
 ms.topic: concept-article
-ms.date: 08/20/2024
+ms.date: 09/17/2024
 monikerRange: ">=net-maui-9.0"
 
 #customer intent: As a developer, I want to host HTML/JS/CSS content in a web view so that I can publish the web app as a mobile app.
@@ -73,54 +73,84 @@ To create a .NET MAUI app with a <xref:Microsoft.Maui.Controls.HybridWebView>:
     - *Resources\Raw\wwwroot\scripts\HybridWebView.js* with the standard <xref:Microsoft.Maui.Controls.HybridWebView> JavaScript library:
 
         ```js
-        function HybridWebViewInit() {
-
-            function DispatchHybridWebViewMessage(message) {
-                const event = new CustomEvent("HybridWebViewMessageReceived", { detail: { message: message } });
-                window.dispatchEvent(event);
-            }
+        window.HybridWebView = {
+            "Init": function () {
+                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);
-                });
-            }
-        }
+                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) {
+                window.HybridWebView.__SendMessageInternal('RawMessage', message);
+            },
+
+            "__SendMessageInternal": function (type, message) {
+
+                const messageToSend = type + '|' + message;
 
                 if (window.chrome && window.chrome.webview) {
                     // Windows WebView2
-                    window.chrome.webview.postMessage(message);
+                    window.chrome.webview.postMessage(messageToSend);
                 }
                 else if (window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers.webwindowinterop) {
                     // iOS and MacCatalyst WKWebView
-                    window.webkit.messageHandlers.webwindowinterop.postMessage(message);
+                    window.webkit.messageHandlers.webwindowinterop.postMessage(messageToSend);
                 }
                 else {
                     // Android WebView
-                    hybridWebViewHost.sendRawMessage(message);
+                    hybridWebViewHost.sendMessage(messageToSend);
+                }
+            },
+
+            "InvokeMethod": function (taskId, methodName, args) {
+                if (methodName[Symbol.toStringTag] === 'AsyncFunction') {
+                    // For async methods, we need to call the method and then trigger the callback when it's done
+                    const asyncPromise = methodName(...args);
+                    asyncPromise
+                        .then(asyncResult => {
+                            window.HybridWebView.__TriggerAsyncCallback(taskId, asyncResult);
+                        })
+                        .catch(error => console.error(error));
+                } else {
+                    // For sync methods, we can call the method and trigger the callback immediately
+                    const syncResult = methodName(...args);
+                    window.HybridWebView.__TriggerAsyncCallback(taskId, syncResult);
                 }
+            },
+
+            "__TriggerAsyncCallback": function (taskId, result) {
+                // Make sure the result is a string
+                if (result && typeof (result) !== 'string') {
+                    result = JSON.stringify(result);
+                }
+
+                window.HybridWebView.__SendMessageInternal('InvokeMethodCompleted', taskId + '|' + result);
             }
         }
 
-        HybridWebViewInit();
+        window.HybridWebView.Init();
         ```
 
     Then, add any additional web content to your project.