Merge pull request #95 from EnsembleUI/webview-javascriptChannels

Add documentation for JavaScript Channels in WebView Widget

Author: sharjeelyunus

pages/widgets/webview.mdx

@@ -19,6 +19,7 @@ The WebView Widget enables seamless integration of web content within native app
 | headerOverrideRules  | array            | Rules for overriding headers based on URL patterns. See [Header Override Rules](#header-override-rules) for details.                                                                                                                                                                                                                                                                                        |
 | cookies              | array            | Array of cookie objects for native applications. See [Cookies](#cookies) for details.                                                                                                                                                                                                                                                                                                                       |
 | cookieHeader         | string           | Direct set-cookie header string for native applications.                                                                                                                                                                                                                                                                                                                                                    |
+| javascriptChannels   | array            | Define named JavaScript channels to receive messages from the loaded page. See [JavaScript Channels](#javascript-channels) for details.                                                                                                                                                                                                                                                                     |
 | styles               | object           | [See properties](#styles)                                                                                                                                                                                                                                                                                                                                                                                   |
 | allowedLaunchSchemes | array of strings | Only available on iOS and Android native apps. Will not have any affect on the web. Optionally specify array of url schemes such as 'tel:', 'mailto:', 'geo:' that when tapped should launch the apps corresponding to the scheme in the system the app is running in.. See below for more details for this property. URL schemes such as http and https are included by default and cannot be overwritten. |
 
@@ -55,6 +56,53 @@ For example - if you are displaying messages inside your webview and want the us
 
 In order to add additional schemes to the default schemes, specify the default schemes and the additional schemes as an array value of allowedLaunchSchemes. URL schemes such as http and https are included by default and cannot be overwritten.
 
+## JavaScript Channels
+
+Use `javascriptChannels` to receive messages sent from the page loaded in the WebView. Each channel has a `name` and an `onMessageReceived` handler. Messages arrive as strings in `event.data.message`.
+
+Example:
+
+```yaml
+- WebView:
+    id: testWebView
+    url: https://10.0.2.2:5501/test_webview_channels.html
+    styles:
+      height: 300
+    javascriptChannels:
+      - name: AppBridge
+        onMessageReceived:
+          executeCode:
+            body: |
+              console.log("Received from AppBridge: " + event.data.message);
+              myMessage.text = event.data.message;
+
+      - name: PaymentChannel
+        onMessageReceived:
+          executeCode:
+            body: |
+              console.log("Received from PaymentChannel: " + event.data.message);
+              var data = JSON.parse(event.data.message);
+              if (data.action === "process_payment") {
+                paymentStatus.text = 'Processing payment...';
+              }
+```
+
+From the page, call `YourChannelName.postMessage(payload)` where `payload` is a string (use `JSON.stringify` for structured data).
+
+Sending messages from the page:
+
+```html
+<script>
+  // Send a simple string
+  window.AppBridge.postMessage('Hello from WebView!');
+
+  // Send structured data as JSON string
+  window.PaymentChannel.postMessage(
+    JSON.stringify({ action: 'process_payment', amount: 29.99, currency: 'USD' })
+  );
+</script>
+```
+
 ## Header Override Rules
 
 The `headerOverrideRules` property allows you to specify different headers for different URLs based on patterns. This is useful when you need to apply different headers for different domains or API endpoints. Each rule consists of: