如何通过WebView将Angular 12应用加载到Android应用？白屏问题排查

存在的核心问题 #

• 缺失网络访问权限：加载公网资源必须在AndroidManifest.xml中声明INTERNET权限，否则所有远程资源请求会被系统拦截，直接白屏。
• 未配置WebViewClient：WebView默认会将url加载请求抛给系统浏览器，你看到的WebView界面本身是空的，内容实际在外部浏览器打开，表现为白屏。
• 混合内容/明文流量限制：Android 9及以上默认禁止HTTP明文流量加载，如果你的Angular应用是HTTP协议，或者HTTPS站点内嵌入了HTTP资源，都会被系统拦截加载。
• 硬件加速渲染兼容问题：你日志中反复出现的eglCodecCommon报错就是WebView硬件加速渲染和Angular的前端渲染逻辑（比如CSS动画、Canvas、Angular自带的渲染引擎特性）不兼容导致的，渲染线程卡住自然白屏。
• Angular路由适配问题：如果你的Angular应用使用的是不带#的HTML5路由模式（PathLocationStrategy），WebView默认不支持该路由的重定向逻辑，也会导致页面加载失败白屏。

修复步骤 #

1. 配置AndroidManifest.xml #

添加网络权限，如果你用的是HTTP协议的站点，还要添加明文流量允许的配置：

<!-- 加入权限声明 -->
<uses-permission android:name="android.permission.INTERNET" />

<!-- 在application节点添加属性允许明文流量（仅HTTP站点需要，HTTPS站点可省略） -->
<application
    ...
    android:usesCleartextTraffic="true"
    ...>

2. 修改WebViewActivity配置 #

补充WebView相关配置，处理渲染兼容问题：

package xx.xxxxx.xxxx;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;

public class WebViewActivity  extends Activity {

    private WebView webview;
    private ProductConstant productConstant = new ProductConstant();

    public void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.webview);

        webview = (WebView) findViewById(R.id.webView1);
        WebSettings webSettings = webview.getSettings();
        webSettings.setJavaScriptEnabled(true);
        webSettings.setDomStorageEnabled(true);
        webSettings.setAppCacheEnabled(true);
        webSettings.setAllowFileAccess(true);

        // 允许混合内容（HTTPS站点加载HTTP资源时需要）
        if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.LOLLIPOP) {
            webSettings.setMixedContentMode(WebSettings.MIXED_CONTENT_ALWAYS_ALLOW);
        }

        // 解决渲染兼容问题，关闭硬件加速，也可以在Manifest的Activity节点配置android:hardwareAccelerated="false"
        webview.setLayerType(View.LAYER_TYPE_SOFTWARE, null);

        // 配置WebViewClient让页面在当前WebView加载，不跳外部浏览器
        webview.setWebViewClient(new WebViewClient() {
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                view.loadUrl(url);
                return true;
            }
        });

        webview.loadUrl(productConstant.CONST_FRONTEND_ROOT_PATH);
    }
}

3. Angular路由适配（可选，仅HTML5路由模式下需要） #

如果你的Angular用的是无#的路由，可以改为Hash路由模式，修改Angular的AppRoutingModule配置：

@NgModule({
  imports: [RouterModule.forRoot(routes, { useHash: true })],
  exports: [RouterModule]
})
export class AppRoutingModule { }

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