如何阻止Blazor WebAssembly PWA（.NET 7）后台闲置后重载刷新

针对你遇到的Android/iOS设备上PWA闲置恢复重载、启动慢的问题，给你几个可行的方向：

1. 先优化初始加载时间（缓解重载后的等待痛苦） #

即使没法完全阻止系统重载，把启动时间降下来也能大幅提升用户体验：

• 启用程序集裁剪：在项目的.csproj文件里添加配置，移除未使用的代码：

  <PropertyGroup>
    <PublishTrimmed>true</PublishTrimmed>
    <TrimMode>full</TrimMode>
    <PublishReadyToRun>true</PublishReadyToRun>
  </PropertyGroup>
  

• 开启静态资源压缩：在IIS里启用gzip或brotli压缩，减少资源传输大小。可以通过IIS管理器的“压缩”功能配置，或者在web.config里添加规则。
• 懒加载非核心组件/程序集：用Blazor的LazyAssemblyLoader延迟加载非初始必要的程序集，比如后台管理、报表这类模块，让初始包更小。
• 拆分大组件：把大型功能拆成独立的RCL（Razor类库），按需加载，避免一次性加载所有代码。

2. 自定义轻量Service Worker（替代默认的，解决缓存问题同时实现快速恢复） #

既然默认Service Worker有刷新错误，自己写一个极简版的，只缓存关键资源，让应用恢复时能快速从缓存加载：

• 注册一个自定义的service-worker.js，只缓存blazor.boot.json、框架核心dll、主程序集这些不会频繁变化的资源。
• 核心逻辑示例：

  const CACHE_NAME = "blazor-pwa-cache-v1";
  const ASSETS_TO_CACHE = [
    "/",
    "/index.html",
    "/blazor.boot.json",
    "/_framework/blazor.webassembly.js",
    // 按需添加你的核心dll文件
  ];
  
  self.addEventListener("install", (event) => {
    event.waitUntil(
      caches.open(CACHE_NAME).then((cache) => cache.addAll(ASSETS_TO_CACHE))
    );
  });
  
  self.addEventListener("fetch", (event) => {
    // 只缓存GET请求，避免动态接口缓存
    if (event.request.method === "GET") {
      event.respondWith(
        caches.match(event.request).then((cachedResponse) => {
          // 优先用缓存，同时后台更新缓存
          const fetchPromise = fetch(event.request).then((networkResponse) => {
            caches.open(CACHE_NAME).then((cache) => {
              cache.put(event.request, networkResponse.clone());
            });
            return networkResponse;
          });
          return cachedResponse || fetchPromise;
        })
      );
    }
  });
  
  self.addEventListener("activate", (event) => {
    // 清理旧缓存版本
    event.waitUntil(
      caches.keys().then((cacheNames) => {
        return Promise.all(
          cacheNames.filter((name) => name !== CACHE_NAME).map((name) => caches.delete(name))
        );
      })
    );
  });
  

• 注意：不要缓存动态内容（比如API请求），避免和服务器数据不一致；测试刷新逻辑，确保不会出现ERR_FAILED错误。

3. 配置PWA的系统持久化参数 #

让系统更愿意保持PWA的后台存活：

• Android端：
  • 在manifest.json里确保display设为"standalone"或"fullscreen"，添加background_color和theme_color，让系统识别为原生级应用。
  • 引导用户把应用加入设备的“后台保护”白名单（比如小米的“神隐模式”、华为的“电池优化”），避免系统回收后台进程。
• iOS端：
  • 在manifest.json里添加"apple-mobile-web-app-capable": "yes"和"apple-mobile-web-app-status-bar-style": "black"，确保PWA以独立应用模式运行——iOS对独立模式的PWA后台存活时间更长。
  • 可以在应用内提示用户“添加到主屏幕”，独立模式的PWA比浏览器标签页的存活优先级更高。

4. 实现应用状态持久化（即使重载也能快速恢复用户上下文） #

把用户的关键状态保存到本地存储，重载后自动恢复，减少感知等待：

• 用localStorage或IndexedDB保存当前路由、表单数据、用户会话等信息。
• 示例代码（保存路由状态）：

  @inject IJSRuntime JS
  @inject NavigationManager NavigationManager
  
  @code {
    protected override async Task OnInitializedAsync()
    {
        // 启动时恢复之前的路由
        var savedRoute = await JS.InvokeAsync<string>("localStorage.getItem", "lastActiveRoute");
        if (!string.IsNullOrEmpty(savedRoute) && savedRoute != NavigationManager.Uri)
        {
            NavigationManager.NavigateTo(savedRoute, forceLoad: false);
        }
    }
  
    protected override void OnAfterRender(bool firstRender)
    {
        if (firstRender)
        {
            // 监听路由变化，保存当前路由
            NavigationManager.LocationChanged += (sender, args) =>
            {
                _ = JS.InvokeVoidAsync("localStorage.setItem", "lastActiveRoute", args.Location);
            };
        }
    }
  }
  

额外提醒 #

如果你的应用是Blazor Hosted模式，还可以启用服务器预渲染，让初始页面更快加载；但如果是独立WASM模式，重点还是放在包大小优化和自定义Service Worker上。

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