webview_flutter javascript 通道无法在发布模式下通信答案

【问题标题】：webview_flutter javascript channel can't communicate in release modewebview_flutter javascript 通道无法在发布模式下通信
【发布时间】：2022-06-22 02:04:49
【问题描述】：

我在我的应用中使用版本为 3.0.0 的 webview_flutter。我大量使用颤振和javascript之间的双向通信。一切都很好地在调试模式下工作。但是，在我构建 APK 之后，javascript 通道开始出现一些错误。我尝试了flutter run --release 并得到了同样的错误。

在我的 Web 应用程序 (ReactJs) 中，我以这种方式使用通道：

index.html

<div id="root">
    <script>
        function sendToFlutter(message) {
            if (flutterChannel) {
                flutterChannel.postMessage(message);
            }
        }
    </script>
</div>

调用来自 React 组件，如下所示：

window.sendToFlutter("hello-world");

我在 Flutter 端的 Webview 设置：

Completer<WebViewController> webViewCompleter = Completer<WebViewController>();

WebView(
    debuggingEnabled: false,
    initialUrl: "https://example.com",
    javascriptMode: JavascriptMode.unrestricted,
    onWebViewCreated: (WebViewController webViewController) {
        webViewCompleter.complete(webViewController);
    },
    javascriptChannels: <JavascriptChannel>{
        JavascriptChannel(
        name: "flutterChannel",
        onMessageReceived: (JavascriptMessage message) {

          if (message.message == "hello-world") {
            // Do something
          }
        })
    },
    navigationDelegate: (NavigationRequest request) {
        if (request.url.startsWith('https://www.youtube.com/')) {
            return NavigationDecision.prevent;
        }
        
        return NavigationDecision.navigate;
    },
    gestureNavigationEnabled: true,
    zoomEnabled: false,
    userAgent: Platform.isAndroid ? kAndroidUserAgent : kIosUserAgent,
);

当我从 ReactJs 调用通道时，我收到此错误：

TypeError: flutterChannel.postMessage is not a function

【问题讨论】：

标签： reactjs flutter dart webview webview-flutter

【解决方案1】：

根据 alexbatalov 在https://github.com/flutter/flutter/issues/92548 的研究，目前的解决方法是：

创建 android/app/proguard-rules.pro。至少你需要有一个 JavascriptInterface 的规则，但我建议复制整个 proguard-android.txt，因为你没有这些规则。
# Preserve annotated Javascript interface methods.
-keepclassmembers class * {
    @android.webkit.JavascriptInterface <methods>; 
}

【讨论】：