reactjs - webview_flutter javascript channel 无法在 Release模式下通信

Question

我正在使用 webview_flutter在我的应用程序中使用版本 3.0.0。我经常使用 flutter 和 javascript 之间的双向通信。一切都在 Debug模式下运行良好。但是，在我构建 APK 后，javascript channel 开始出现一些错误。我试过 flutter run --release并得到了同样的错误。

在我的网络应用程序 (ReactJs) 中，我以这种方式使用 channel :

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 调用 channel 时，出现此错误:

TypeError: flutterChannel.postMessage is not a function

Answer 1

根据 alexbatalov 在 https://github.com/flutter/flutter/issues/92548 中的研究，当前的解决方法是执行以下操作:

Create android/app/proguard-rules.pro. At minimum you need to have arule for JavascriptInterface, but I recommend to copy entireproguard-android.txt, given the fact that you don’t have these rules.

# Preserve annotated Javascript interface methods.
-keepclassmembers class * {
    @android.webkit.JavascriptInterface <methods>; 
}