如何用Service Worker缓存ExpressJS动态渲染的虚拟index.html？

嘿，我来帮你解决这个Service Worker缓存动态渲染index.html的问题。先梳理下你的场景：用Express+Twig动态生成index.html，而当前用SWPrecacheWebpackPlugin在构建阶段只能缓存静态资源，没法处理运行时生成的虚拟HTML。下面逐个解答你的问题：

1. 是否可以修改代码实现该需求？ #

完全可以！有两种主要方案来实现缓存动态index.html的需求：

方案一：利用SWPrecache的runtimeCaching配置 #

SWPrecache支持在运行时缓存特定请求，不需要依赖构建阶段的静态文件。你可以在SWPrecacheWebpackPlugin的配置里添加runtimeCaching规则，专门处理导航请求（也就是访问根路径或index.html的请求）：

new SWPrecacheWebpackPlugin({
    // 原有配置保持不变
    "cacheId": 'gravity-bp',
    "dontCacheBustUrlsMatching": /\.\w{8}\./, // 修正了你原正则的语法错误
    "filename": 'sw.js',
    "minify": true,
    "navigateFallback": '/', // 改为根路径更贴合动态场景
    "stripPrefix": 'public/',
    "swFilePath": 'public/sw.js',
    "staticFileGlobs": [
        // 移除public/index.html，因为它是动态生成的，构建时不存在
        'public/**/!(*map*|*sw*)',
    ],
    // 添加runtimeCaching规则
    runtimeCaching: [
        {
            urlPattern: /^\/$/, // 匹配根路径的导航请求
            handler: 'networkFirst', // 优先从网络获取最新内容，离线用缓存
            options: {
                cacheName: 'dynamic-nav-cache',
                expiration: {
                    maxEntries: 5, // 最多缓存5个版本
                    maxAgeSeconds: 86400, // 缓存有效期1天
                },
            },
        },
    ]
})

方案二：自定义Service Worker的fetch事件 #

如果你需要更灵活的控制，可以通过swSrc引入自定义的Service Worker逻辑，在fetch事件里手动缓存动态HTML：

1. 先修改SWPrecache配置，添加swSrc指向你的自定义sw.ts：

new SWPrecacheWebpackPlugin({
    // 原有配置...
    swSrc: './src/sw.ts', // 引入你的自定义Service Worker代码
})

2. 在你的sw.ts里添加fetch事件监听：

// 原有注册逻辑保持不变...

// 添加fetch事件处理
self.addEventListener('fetch', (event) => {
    const request = event.request;
    // 匹配导航请求（比如访问根路径或SPA路由）
    if (request.mode === 'navigate') {
        event.respondWith(
            // 优先从网络获取
            fetch(request)
                .then(response => {
                    // 将新响应存入缓存
                    const cachePromise = caches.open('dynamic-html').then(cache => {
                        cache.put(request, response.clone());
                        return response;
                    });
                    return cachePromise;
                })
                .catch(() => {
                    // 网络失败时从缓存读取
                    return caches.match(request) || caches.match('/');
                })
        );
    }
});

2. 这种实现方式是否存在问题？ #

是的，直接缓存动态渲染的index.html存在几个潜在风险：

• 缓存新鲜度问题：如果index.html包含实时数据、版本信息或动态内容，缓存后用户可能看到旧内容，除非有完善的缓存失效机制。
• 个性化内容冲突：如果你的index.html根据用户登录状态、地域等渲染个性化内容，Service Worker的全局缓存会导致不同用户看到相同的缓存内容，造成错误。
• SPA路由混淆：如果你的Express路由app.get("*", ...)是为SPA服务的，缓存根路径的index.html没问题，但如果是多页面应用，会导致所有路由都返回同一个缓存的HTML。
• 存储冗余：频繁更新的HTML会生成多个缓存版本，占用浏览器的存储空间。

3. 若问题2答案为是，该如何处理及原因是什么？ #

针对每个问题，给出对应的解决方案和原因：

处理缓存新鲜度 #

• 使用networkFirst策略：优先从网络获取最新的HTML，只有离线时才用缓存。这样用户平时看到的都是最新内容，离线时也能正常访问。
• 添加缓存过期规则：通过runtimeCaching的expiration配置限制缓存的数量和有效期，避免旧内容长期留存。
• 响应头辅助控制：在Express返回index.html时添加Cache-Control响应头，比如：

  app.get("*", function(req: any, res: any, next: any){
      res.locals.version = version;
      // 添加缓存控制头
      res.setHeader('Cache-Control', 'public, max-age=3600, must-revalidate');
      res.render('index');
  });
  

  这个头告诉浏览器缓存1小时，之后必须向服务器验证内容是否更新。

处理个性化内容 #

• 不要缓存个性化HTML：如果index.html包含用户专属内容，直接跳过缓存，让每次请求都从服务器获取。可以在Service Worker的fetch事件里判断请求的特性（比如是否带Cookie），跳过缓存：

  self.addEventListener('fetch', (event) => {
      const request = event.request;
      // 如果请求包含用户Cookie，跳过缓存
      if (request.headers.get('Cookie')) {
          return;
      }
      // 其他缓存逻辑...
  });
  

• 分离静态与动态内容：把HTML里的静态部分（比如布局、CSS/JS引用）缓存，动态内容通过AJAX请求在客户端加载，这样既可以缓存静态资源，又能保证动态内容的实时性。

处理SPA路由混淆 #

• 精准匹配路由：如果是SPA，保持navigateFallback: '/'即可，因为前端路由会处理不同的路径。如果是多页面应用，需要修改runtimeCaching的urlPattern，只匹配特定的HTML路径，比如：

  runtimeCaching: [
      {
          urlPattern: /^\/$|^\/about$|^\/contact$/, // 只缓存特定页面
          handler: 'networkFirst',
          // 其他配置...
      },
  ]
  

处理存储冗余 #

• 清理旧缓存：在Service Worker的activate事件里删除过期的缓存：

  self.addEventListener('activate', (event) => {
      event.waitUntil(
          caches.keys().then(cacheNames => {
              return Promise.all(
                  cacheNames.filter(name => {
                      // 保留需要的缓存，删除其他旧缓存
                      return !['dynamic-nav-cache', 'gravity-bp'].includes(name);
                  }).map(name => caches.delete(name))
              );
          })
      );
  });
  

最后，记得测试离线场景，在Chrome DevTools的Application面板里查看缓存的资源，确保动态index.html被正确缓存。

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