Xamarin Android低版本WebView不支持JS import的解决方案咨询

针对原生WebView的Workaround #

1. 强制Blazor WASM输出ES5兼容代码 #

从根源解决语法兼容问题，修改Blazor项目的.csproj配置，让构建过程把ES6+语法转译为ES5：

<PropertyGroup>
    <!-- 保留原有配置，新增以下项 -->
    <TargetESVersion>es5</TargetESVersion>
</PropertyGroup>

重新发布Blazor页面后，所有import语句会被转译为低版本JS引擎支持的语法，无需修改WebView逻辑。

2. 注入ES模块兼容垫片 #

如果无法修改Blazor项目配置，可以在WebView加载页面后，注入es-module-shims垫片来模拟ES模块支持：

1. 将es-module-shims.js下载到Xamarin Android项目的Assets文件夹，设置生成操作为AndroidAsset。
2. 自定义WebViewClient拦截页面加载完成事件，注入垫片并修改模块脚本类型：

webView.SetWebViewClient(new CustomWebViewClient());

public class CustomWebViewClient : WebViewClient
{
    public override void OnPageFinished(WebView view, string url)
    {
        base.OnPageFinished(view, url);
        // 注入本地垫片脚本
        view.LoadUrl("javascript:(function(){var s=document.createElement('script');s.src='file:///android_asset/es-module-shims.js';document.head.appendChild(s);})()");
        // 将type="module"的脚本替换为垫片支持的类型
        view.LoadUrl("javascript:(function(){document.querySelectorAll('script[type=\"module\"]').forEach(s=>s.type='module-shim');})()");
    }
}

替代WebView方案（无废弃风险） #

1. 引导用户更新Android System WebView #

Android 8及以下的WebView是可独立更新的应用，只要用户升级到Chrome 61及以上版本的WebView，就能原生支持ES6模块。可以在应用启动时检查版本并提示：

int webViewVersion = Android.Webkit.WebView.Version;
if (webViewVersion < 61)
{
    new AlertDialog.Builder(this)
        .SetTitle("需更新WebView")
        .SetMessage("当前WebView版本过低，无法正常加载页面，请前往Google Play商店更新Android System WebView。")
        .SetPositiveButton("去更新", (s, e) =>
        {
            StartActivity(new Intent(Intent.ActionView, Android.Net.Uri.Parse("market://details?id=com.google.android.webview")));
        })
        .SetNegativeButton("取消", (s, e) => {})
        .Show();
}

2. 使用Chrome Custom Tabs跳转外部浏览器 #

如果不需要完全内嵌页面，Chrome Custom Tabs可以提供接近应用内的体验，且Chrome浏览器的版本更新更及时，天然支持ES6模块：

var customTabsIntent = new CustomTabsIntent.Builder().Build();
customTabsIntent.LaunchUrl(this, Android.Net.Uri.Parse("你的Blazor WASM页面URL"));

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