Flutter InAppWebView如何接收Web端jsBridge/apkClient消息？

问题根源 #

你当前使用的WebMessageListener仅监听指定JS对象的postMessage方法，但Web端调用的是window.jsBridge.pushMessage(...)和window.apkClient.appsFlyerEvent(...)这类非标准方法，无法被WebMessageListener捕获。

两种可行解决方法 #

方法一：适配WebMessageListener的调用规范（需修改Web端代码） #

直接调整Web端的调用方式，改用标准的postMessage传递消息：

// Web端原window.jsBridge.pushMessage(xxx)改为
window.jsBridge.postMessage({ action: 'pushMessage', data: xxx });

// Web端原window.apkClient.appsFlyerEvent(eventName, params)改为
window.apkClient.postMessage({ action: 'appsFlyerEvent', event: eventName, params: params });

然后在Flutter中添加两个WebMessageListener分别监听两个对象：

if (!Platform.isAndroid || await AndroidWebViewFeature.isFeatureSupported(AndroidWebViewFeature.WEB_MESSAGE_LISTENER)) {
  // 监听jsBridge
  await controller.addWebMessageListener(WebMessageListener(
    jsObjectName: "jsBridge",
    onPostMessage: (message, sourceOrigin, isMainFrame, replyProxy) {
      final data = jsonDecode(message);
      if (data['action'] == 'pushMessage') {
        // 处理pushMessage业务逻辑
      }
    },
  ));

  // 监听apkClient
  await controller.addWebMessageListener(WebMessageListener(
    jsObjectName: "apkClient",
    onPostMessage: (message, sourceOrigin, isMainFrame, replyProxy) {
      final data = jsonDecode(message);
      if (data['action'] == 'appsFlyerEvent') {
        // 处理appsFlyerEvent业务逻辑
      }
    },
  ));
}

方法二：用JavaScriptChannel适配现有Web端代码（无需修改Web端） #

如果不想改动Web端代码，可通过注入JS桥接层，把原有调用映射到JavaScriptChannel：

1. 添加JavaScriptChannel并注入适配JS：

// 初始化WebView后添加两个消息通道
await controller.addJavaScriptChannel(
  'jsBridge',
  onMessageReceived: (JavaScriptMessage message) {
    final pushData = jsonDecode(message.message);
    // 处理window.jsBridge.pushMessage传递的内容
  },
);

await controller.addJavaScriptChannel(
  'apkClient',
  onMessageReceived: (JavaScriptMessage message) {
    final eventData = jsonDecode(message.message);
    String eventName = eventData['event'];
    Map params = eventData['params'];
    // 处理appsFlyerEvent的业务逻辑
  },
);

// 注入适配JS，将原有方法映射到通道的postMessage
await controller.evaluateJavascript('''
  // 适配jsBridge.pushMessage
  window.jsBridge = window.jsBridge || {};
  window.jsBridge.pushMessage = function(data) {
    window.jsBridge.postMessage(JSON.stringify(data));
  };

  // 适配apkClient.appsFlyerEvent
  window.apkClient = window.apkClient || {};
  window.apkClient.appsFlyerEvent = function(eventName, params) {
    window.apkClient.postMessage(JSON.stringify({event: eventName, params: params}));
  };
''');

2. 确保WebView启用JavaScript：

WebView(
  javascriptMode: JavascriptMode.unrestricted,
  // 其他配置项...
)

额外注意事项 #

• Android端WebMessageListener仅支持API 24及以上版本，低版本设备需用JavaScriptChannel替代。
• 接收消息时注意解析JSON格式参数，确保Web端传递的内容可正常解码。

内容的提问来源于stack exchange，提问作者爽爽爽爽爽爽