Android Compose中WebView无法正常加载部分页面问题排查

以下是针对你遇到的「Compose WebView加载部分网站异常，但其他平台正常」问题的具体排查和解决方向：

1. 核对WebView内核版本差异 #

Android系统自带WebView的Chromium版本往往滞后于Chrome浏览器或Flutter WebView使用的版本，部分现代网站依赖的JS特性可能不兼容：

• 通过WebView.getCurrentWebViewPackage()?.versionName获取当前WebView版本，对比Chrome稳定版的版本号
• 测试启用WebView Beta/Dev通道版本，或引导用户更新系统WebView（Android 10+支持独立更新）

2. 补充缺失的WebView关键配置 #

现有设置可能缺少现代网站必需的配置，建议补充：

settings.apply {
    // 支持JS弹窗、新窗口打开
    javaScriptCanOpenWindowsAutomatically = true
    // 允许跨域资源访问（针对部分嵌入资源）
    allowUniversalAccessFromFileURLs = true
    // 解除媒体播放需用户交互的限制
    mediaPlaybackRequiresUserGesture = false
    // 调整缓存模式，避免过度清空缓存导致加载异常
    cacheMode = WebSettings.LOAD_DEFAULT
    // 设置Chrome移动端用户代理，规避网站对WebView的限制
    userAgentString = "Mozilla/5.0 (Linux; Android 10; SM-G973F) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Mobile Safari/537.36"
    // 允许混合内容加载（若网站同时存在HTTP/HTTPS资源）
    mixedContentMode = WebSettings.MIXED_CONTENT_COMPATIBILITY_MODE
}

3. 排查自定义JavaScript接口的冲突 #

你添加的EventListenerJavascriptInterface可能与网站JS逻辑冲突：

• 临时注释addJavascriptInterface代码，测试网站是否恢复正常
• 确保接口内的所有暴露方法都添加了@JavascriptInterface注解，避免未授权访问引发的异常

4. 验证POST请求的一致性 #

使用postUrl加载时，需确保请求参数与其他平台完全匹配：

• 检查body的编码格式（如是否为application/x-www-form-urlencoded）是否符合网站要求
• 通过抓包工具（Charles/Fiddler）对比Compose WebView与Flutter WebView的POST请求，包括请求头、参数编码、Content-Type等细节

5. 增强WebView的错误日志捕获 #

默认的WebViewClient和WebChromeClient不会输出详细错误信息，自定义子类捕获异常：

webViewClient = object : WebViewClient() {
    override fun onReceivedError(view: WebView?, request: WebResourceRequest?, error: WebResourceError?) {
        Log.e("WebViewError", "错误码: ${error?.errorCode}, 描述: ${error?.description}")
    }

    override fun onReceivedHttpError(view: WebView?, request: WebResourceRequest?, errorResponse: WebResourceResponse?) {
        Log.e("WebViewHttpError", "状态码: ${errorResponse?.statusCode}, 原因: ${errorResponse?.reasonPhrase}")
    }
}

webChromeClient = object : WebChromeClient() {
    override fun onConsoleMessage(consoleMessage: ConsoleMessage?): Boolean {
        Log.d("WebViewConsole", "${consoleMessage?.message()} -- 行号: ${consoleMessage?.lineNumber()}, 来源: ${consoleMessage?.sourceId()}")
        return true
    }
}

通过日志定位JS错误、HTTP请求失败等具体问题。

6. 排查硬件加速冲突 #

部分网站渲染可能与WebView硬件加速不兼容：

• 尝试关闭硬件加速测试：

setLayerType(View.LAYER_TYPE_SOFTWARE, null)

若加载恢复正常，说明硬件加速导致渲染异常。

7. 对齐Flutter WebView的配置 #

Flutter的webview_flutter插件默认配置更贴近现代浏览器，可参考其默认设置调整：

• 检查是否启用安全浏览、混合渲染模式（Android端的useHybridComposition）
• 对比缓存策略、JS引擎的启用参数

8. 确认权限与包可见性设置 #

针对高版本Android（SDK 33+）：

• 确保AndroidManifest.xml声明了必要权限：

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

• 添加包可见性配置，允许WebView访问外部域名：

<queries>
    <intent>
        <action android:name="android.intent.action.VIEW" />
        <data android:scheme="https" />
    </intent>
</queries>

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