使用sw-precache实现networkFirst策略后缓存无法更新的问题

我来帮你搞定这个问题——你遇到的是sw-precache结合networkFirst策略时常见的缓存更新逻辑问题，下面一步步拆解解决：

问题根源分析 #

你当前的配置里，runtimeCaching的urlPattern用了字符串'http://localhost:8080'，匹配范围太宽泛，可能把静态HTML页面也包含进去了；另外sw-precache生成的Service Worker默认不会自动激活新版本，导致即使你更新了数据，旧SW还在提供缓存内容；最后，静态资源的缓存策略如果没和接口请求区分开，也会导致页面内容一直读缓存。

具体解决方案 #

1. 精确匹配API请求规则 #

把urlPattern改成正则表达式，只匹配你的数据接口（比如/api开头的路径），避免和静态资源的缓存策略冲突：

runtimeCaching: [
  {
    urlPattern: /^http:\/\/localhost:8080\/api/, // 精确匹配API接口
    handler: 'networkFirst',
    options: {
      cache: {
        name: 'api-data-cache', // 给缓存起明确名字，方便调试
        maxAgeSeconds: 60 * 15, // 设置缓存有效期，比如15分钟到期后自动重新请求
        maxEntries: 30 // 限制缓存条目数，防止缓存膨胀
      }
    }
  }
]

2. 配置Service Worker自动更新激活 #

添加skipWaiting和clientsClaim选项，让新生成的SW安装后立即激活，接管所有打开的页面，不用等用户关闭页面再重新打开：

skipWaiting: true,
clientsClaim: true,

3. 确保静态资源缓存自动更新 #

sw-precache默认会给静态文件（CSS、JS、图片）添加内容哈希，只要文件内容变化，生成的sw.js里的缓存清单就会更新，浏览器会自动检测到SW变化并更新。需要注意：

• 确保HTML文件在staticFileGlobs里，这样修改HTML后，SW的缓存清单也会更新
• 如果是动态生成的HTML，建议不要直接缓存，或者给HTML添加版本号参数（比如index.html?v=2）

修改后的完整gulp任务代码 #

gulp.task('generate-service-worker', function(callback) {
  var path = require('path');
  var swPrecache = require('sw-precache');
  var rootDir = '.';

  swPrecache.write(path.join(rootDir, 'sw.js'), {
    staticFileGlobs: [
      rootDir + '/css/**.css',
      rootDir + '/js/**/*.{js,css}',
      rootDir + '/images/**/*.{png,jpg,jpeg}',
      rootDir + '/*.{html,js}',
    ],
    runtimeCaching: [
      {
        urlPattern: /^http:\/\/localhost:8080\/api/,
        handler: 'networkFirst',
        options: {
          cache: {
            name: 'api-data-cache',
            maxAgeSeconds: 60 * 15,
            maxEntries: 30
          }
        }
      }
    ],
    stripPrefix: rootDir,
    skipWaiting: true,
    clientsClaim: true,
    verbose: true // 开启详细日志，方便调试缓存更新过程
  }, callback);
});

调试小技巧 #

在Chrome DevTools的Application -> Service Workers面板里：

• 勾选Update on reload，每次刷新页面都会强制检查SW更新
• 点击Unregister可以快速注销旧SW，测试新配置
• 查看Cache Storage里的缓存内容，确认API数据的缓存是否按预期更新

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