[webview_flutter_web] Add support for webview->host JavaScript channels

packages/webview_flutter/webview_flutter_web/CHANGELOG.md

@@ -3,6 +3,10 @@
 * Updates minimum Flutter version to 3.3.
 * Aligns Dart and Flutter SDK constraints.
 
+## 0.2.3
+
+* Adds implementation for `WebWebViewController.addJavaScriptChannel` and `WebWebViewController.removeJavaScriptChannel`.
+
 ## 0.2.2+1
 
 * Updates links for the merge of flutter/plugins into flutter/packages.

packages/webview_flutter/webview_flutter_web/README.md

@@ -7,6 +7,8 @@ The following functionality is currently available:
 
 - `loadRequest`
 - `loadHtmlString` (Without `baseUrl`)
+- `addJavaScriptChannel`
+- `removeJavaScriptChannel`
 
 Nothing else is currently supported.
 
@@ -22,6 +24,21 @@ yet, so it currently requires extra setup to use:
 Once the step above is complete, the APIs from `webview_flutter` listed
 above can be used as normal on web.
 
+### JavaScript channels
+
+Contrary to the Android and iOS implementations, the `addJavaScriptChannel`
+method does not create a named channel; the channel can only be accessed using
+`window.parent`. In order to send a cross-platform message over a channel named
+`flutterApp`, the following construction can be used in the web application:
+
+```ts
+if (window.flutterApp) {
+  window.flutterApp.postMessage(message);
+} else if (window.parent) {
+  window.parent.postMessage(message, targetOrigin);
+}
+```
+
 ## Tests
 
 Tests are contained in the `test` directory. You can run all tests from the root

packages/webview_flutter/webview_flutter_web/lib/src/web_webview_controller.dart

@@ -2,6 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import 'dart:collection';
 import 'dart:convert';
 import 'dart:html' as html;
 
@@ -57,6 +58,10 @@ class WebWebViewController extends PlatformWebViewController {
   WebWebViewControllerCreationParams get _webWebViewParams =>
       params as WebWebViewControllerCreationParams;
 
+  /// Mapping between channel names and message event handlers.
+  HashMap<String, void Function(html.Event)> javascriptChannels =
+      HashMap<String, void Function(html.Event)>();
+
   @override
   Future<void> loadHtmlString(String html, {String? baseUrl}) async {
     // ignore: unsafe_html
@@ -106,6 +111,31 @@ class WebWebViewController extends PlatformWebViewController {
       encoding: encoding,
     ).toString();
   }
+
+  @override
+  Future<void> addJavaScriptChannel(
+    JavaScriptChannelParams javaScriptChannelParams,
+  ) async {
+    void handler(html.Event event) {
+      if (event is html.MessageEvent) {
+        javaScriptChannelParams.onMessageReceived(
+            JavaScriptMessage(message: event.data.toString()));
+      }
+    }
+
+    javascriptChannels[javaScriptChannelParams.name] = handler;
+    html.window.addEventListener('message', handler);
+  }
+
+  @override
+  Future<void> removeJavaScriptChannel(String javaScriptChannelName) async {
+    final void Function(html.Event)? handler =
+        javascriptChannels[javaScriptChannelName];
+
+    if (handler != null) {
+      html.window.removeEventListener('message', handler);
+    }
+  }
 }
 
 /// An implementation of [PlatformWebViewWidget] using Flutter the for Web API.

packages/webview_flutter/webview_flutter_web/pubspec.yaml

@@ -2,7 +2,7 @@ name: webview_flutter_web
 description: A Flutter plugin that provides a WebView widget on web.
 repository: https://github.com/flutter/packages/tree/main/packages/webview_flutter/webview_flutter_web
 issue_tracker: https://github.com/flutter/flutter/issues?q=is%3Aissue+is%3Aopen+label%3A%22p%3A+webview%22
-version: 0.2.2+1
+version: 0.2.3
 
 environment:
   sdk: ">=2.18.0 <4.0.0"