如何在Service Worker中根据文件修改时间更新缓存文件？

你当前使用的StaleWhileRevalidate策略本身就具备后台更新缓存的能力，但要让它能感知到文件最后修改时间的变化，可以从以下几个角度调整：

1. 配置服务器正确的缓存验证头 #

这是让Service Worker识别资源更新的核心前提：

• 确保图片服务器返回Last-Modified（或ETag）响应头，且图片更新时该字段值同步更新
• 设置合理的Cache-Control头，比如Cache-Control: max-age=3600, must-revalidate，既允许短期缓存，又强制超过时限后向服务器验证资源是否变化

当Service Worker后台发起请求时，会自动带上If-Modified-Since头，服务器对比后如果资源已更新，就返回200和新图片；如果没变化则返回304。StaleWhileRevalidate会自动将新响应更新到缓存中，下次用户访问时就能调用到新缓存的资源。

2. 主动触发缓存更新（可选） #

如果需要固定每2-3天强制检查一次更新，可以在Service Worker中添加定时逻辑：

self.addEventListener('activate', (event) => {
  event.waitUntil(
    // 每2天触发一次检查（单位：毫秒）
    setInterval(async () => {
      const targetCache = await caches.open(`changing-images-${cacheSuffix}`);
      const cachedRequests = await targetCache.keys();
      
      // 遍历缓存内的所有图片请求，强制发起验证
      for (const request of cachedRequests) {
        const response = await fetch(request, { cache: 'reload' });
        if (response.ok) {
          await targetCache.put(request, response);
        }
      }
    }, 2 * 24 * 60 * 60 * 1000)
  );
});

注意：Service Worker可能进入休眠状态，定时任务无法保证精准触发，因此这只能作为辅助手段，核心仍依赖服务器缓存头配置。

3. 清理旧缓存（可选） #

若缓存中积累了过多旧版本资源，可在Service Worker激活阶段清理无关缓存：

self.addEventListener('activate', (event) => {
  event.waitUntil(
    caches.keys().then((cacheNames) => {
      return Promise.all(
        cacheNames.filter((name) => {
          // 只清理当前目标缓存以外的旧版本缓存
          return name.startsWith('changing-images-') && name !== `changing-images-${cacheSuffix}`;
        }).map((name) => caches.delete(name))
      );
    })
  );
});

内容的提问来源于stack exchange，提问作者M.H.