能否在.NET 8 Blazor交互式渲染WebApp中为单个页面启用PWA功能？

背景与困惑 #

我对Blazor、其渲染模式以及Blazor WebAssembly的PWA实现可能性存在困惑。

Blazor Progressive Web Application (PWA) 是一种单页应用（SPA），可借助现代浏览器实现类桌面应用的行为。

我了解到可以通过WebAssembly独立应用模板创建Blazor PWA，甚至可为带有交互式渲染的Blazor Web App（项目模板）添加PWA功能（至少我已在开发环境中测试过，但不具备离线能力）。

核心问题 #

Blazor Web App可包含多个页面（如https://url/path1、https://url/path2等），且每个页面可使用不同布局，那么在启用交互式渲染的Blazor Web App中，能否仅为单个页面启用PWA功能？

目标需求 #

一个页面（如https://url/path1）使用服务器端渲染组件（无按钮等交互），另一个页面（如https://url/path2）可完全离线使用并支持重载，后者无需访问path1（因此使用不同布局）。

可以实现仅为Blazor Web App中的单个页面启用PWA功能，核心思路是通过拆分PWA注册逻辑、隔离资源缓存范围来实现，具体步骤如下：

1. 拆分布局与PWA注册代码

   • 为需要PWA的页面（path2）单独创建专属布局，在该布局的HeadContent中仅引入PWA相关的注册脚本和manifest.json；path1使用的布局不包含任何PWA相关资源。
   • 示例：在Path2Layout.razor中添加：

     <HeadContent>
         <link rel="manifest" href="/path2/manifest.json" />
         <script>
             if ('serviceWorker' in navigator) {
                 window.addEventListener('load', () => {
                     navigator.serviceWorker.register('/path2/sw.js')
                         .then(reg => console.log('SW registered: ', reg))
                         .catch(err => console.log('SW registration failed: ', err));
                 });
             }
         </script>
     </HeadContent>
     

2. 配置Service Worker的缓存范围

   • 自定义Service Worker（sw.js），仅缓存path2相关的资源（页面、静态文件、Wasm包等），避免缓存path1的内容。
   • 示例缓存逻辑：

     const CACHE_NAME = 'path2-pwa-cache-v1';
     const ASSETS_TO_CACHE = [
         '/path2',
         '/path2/css/app.css',
         '/path2/_framework/blazor.webassembly.js',
         // 其他path2相关资源
     ];
     
     self.addEventListener('install', (event) => {
         event.waitUntil(
             caches.open(CACHE_NAME)
                 .then(cache => cache.addAll(ASSETS_TO_CACHE))
         );
     });
     
     self.addEventListener('fetch', (event) => {
         // 仅处理path2路径下的请求
         if (event.request.url.includes('/path2/')) {
             event.respondWith(
                 caches.match(event.request)
                     .then(response => response || fetch(event.request))
             );
         }
     });
     

3. 调整项目配置

   • 在Program.cs中确保Blazor Web App的交互式渲染模式配置正确：path1使用SSR（Server-Side Rendering），path2启用Wasm交互式渲染（设置RenderMode.WebAssembly）。
   • 示例路由配置：

     app.MapRazorComponents<App>()
        .AddInteractiveServerRenderMode()
        .AddInteractiveWebAssemblyRenderMode()
        .AddAdditionalAssemblies(typeof(Client._Imports).Assembly);
     
     // 为path2指定Wasm渲染模式
     app.MapWhen(ctx => ctx.Request.Path.StartsWithSegments("/path2"), app => {
         app.MapRazorComponents<App>()
            .AddInteractiveWebAssemblyRenderMode()
            .AddAdditionalAssemblies(typeof(Client._Imports).Assembly);
     });
     

4. 验证离线能力

   • 部署后，访问path2触发Service Worker注册和资源缓存，然后断开网络测试离线访问和重载功能；path1仍保持SSR模式，依赖网络连接。

需要注意的是：

• 确保manifest.json中的scope字段设置为/path2/，限制PWA的作用范围仅在该路径下。
• 开发环境中可能需要关闭缓存或使用生产构建测试离线能力，因为开发服务器的资源可能不会被Service Worker正确缓存。

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