.NET Maui中用WebView嵌入HTML5 PWA：资源存放与加载位置

一、PWA文件的存放位置 #

• 直接把你的HTML、CSS、JS以及PWA相关资源（比如图标、manifest.json）放到项目根目录下的wwwroot文件夹里——如果项目里没有这个文件夹，自己新建一个就行，保持PWA原有的文件结构不变。
• 选中所有PWA文件，右键打开属性面板，设置：
  • 生成操作：改为Content
  • 复制到输出目录：设为如果较新则复制
    这样能保证这些文件会被正确打包到最终的MAUI应用中。

二、用WebView加载PWA #

1. 在XAML中添加WebView #

打开你要嵌入PWA的页面XAML（比如默认的MainPage.xaml），添加WebView控件，直接指定本地入口文件路径：

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="YourAppNamespace.MainPage">
    <WebView x:Name="PwaWebView" 
             Source="wwwroot/index.html"
             VerticalOptions="FillAndExpand"
             HorizontalOptions="FillAndExpand"/>
</ContentPage>

注意把YourAppNamespace换成你自己的项目命名空间。

2. 配置WebView支持PWA特性 #

如果你的PWA需要离线缓存、Service Worker这类特性，得针对不同平台做配置：

• Android端：打开Platforms/Android/MainApplication.cs，在OnCreate方法里添加WebView的配置：

protected override void OnCreate(Bundle savedInstanceState)
{
    base.OnCreate(savedInstanceState);
    global::Xamarin.Forms.Forms.Init(this, savedInstanceState);

    Microsoft.Maui.Handlers.WebViewHandler.Mapper.AppendToMapping("EnablePwaSupport", (handler, view) =>
    {
        if (handler.PlatformView is Android.Webkit.WebView webView)
        {
            webView.Settings.JavaScriptEnabled = true;
            webView.Settings.DomStorageEnabled = true;
            webView.Settings.AllowFileAccess = true;
            webView.Settings.CacheMode = Android.Webkit.CacheMode.Default;
            // 开启Service Worker支持
            webView.Settings.ServiceWorkerEnabled = true;
        }
    });
}

• iOS/MacCatalyst端：打开Platforms/iOS/Program.cs（或MacCatalyst对应的Program.cs），添加自定义WebView处理器来启用相关特性：

var builder = MauiApp.CreateBuilder();
builder
    .UseMauiApp<App>()
    .ConfigureMauiHandlers(handlers =>
    {
        handlers.AddHandler<WebView, PwaWebViewHandler>();
    });

public class PwaWebViewHandler : WebViewHandler
{
    protected override void ConnectHandler(WKWebView platformView)
    {
        base.ConnectHandler(platformView);
        platformView.Configuration.Preferences.JavaScriptEnabled = true;
        platformView.Configuration.DefaultWebpagePreferences.AllowsContentJavaScript = true;
        // 配置Service Worker支持
        platformView.Configuration.SetURLSchemeHandler(new ServiceWorkerHandler(), "app");
    }
}

public class ServiceWorkerHandler : NSObject, IWKURLSchemeHandler
{
    public void StartURLSchemeTask(WKWebView webView, IWKURLSchemeTask task)
    {
        // 这里可以处理Service Worker的请求逻辑，比如本地资源读取
    }

    public void StopURLSchemeTask(WKWebView webView, IWKURLSchemeTask task)
    {
        // 停止任务的逻辑处理
    }
}

3. 代码后台动态加载（可选） #

如果需要在C#代码里控制加载时机，比如在页面显示时加载，可以在页面的构造函数或OnAppearing方法中设置：

public MainPage()
{
    InitializeComponent();
    PwaWebView.Source = new UrlWebViewSource { Url = "wwwroot/index.html" };
}

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