CRA PWA配置Network First策略后无法加载最新内容求助

我之前也碰到过类似的情况，大概率是Service Worker（以下简称SW）的注册、更新机制或者缓存策略配置环节出了问题，咱们一步步来排查：

1. 确认自定义SW是否完全替换了CRA默认逻辑 #

CRA自带一套SW处理流程，你得确保自己的sw-custom.js真正被构建并注册生效：

• 检查sw-build.js的workbox配置，确认Network First策略正确定义，比如：

const { generateSW } = require('workbox-build');

generateSW({
  swDest: 'build/service-worker.js',
  runtimeCaching: [
    {
      urlPattern: /^https?.*/,
      handler: 'NetworkFirst', // 重点：这里必须是NetworkFirst
      options: {
        cacheName: 'network-first-cache-v1', // 建议加版本号，方便缓存更新
        networkTimeoutSeconds: 3, // 可选：网络超时后 fallback 到缓存
        expiration: {
          maxEntries: 50,
          maxAgeSeconds: 30 * 24 * 60 * 60, // 缓存有效期30天
        },
      },
    },
  ],
}).then(({ warnings }) => {
  warnings.forEach(warn => console.warn(warn));
  console.log('自定义Service Worker生成成功');
});

• 检查package.json的build脚本，确保build后优先执行自定义SW构建：
  比如："build": "react-scripts build && node sw-build.js"，这样能保证CRA构建完成后，用你的自定义SW覆盖默认文件。

2. 修正SW注册逻辑，主动触发更新检测 #

CRA默认的注册逻辑不会主动检测SW更新，你需要修改注册代码（比如serviceWorker.js），让浏览器主动检查并处理更新：

export function register(config) {
  if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
    const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
    if (publicUrl.origin !== window.location.origin) return;

    window.addEventListener('load', () => {
      const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;

      navigator.serviceWorker.register(swUrl).then(registration => {
        // 监听SW更新事件
        registration.addEventListener('updatefound', () => {
          const newWorker = registration.installing;
          newWorker.addEventListener('statechange', () => {
            if (newWorker.state === 'installed') {
              if (navigator.serviceWorker.controller) {
                // 提示用户有新版本可用
                console.log('检测到新版本，请刷新页面！');
                // 可选：强制激活新SW（需配合SW内的消息监听）
                newWorker.postMessage({ type: 'SKIP_WAITING' });
                // 弹窗提示用户刷新
                if (window.confirm('发现新版本，点击确定刷新页面获取最新内容')) {
                  window.location.reload();
                }
              } else {
                console.log('内容已缓存，可离线使用');
              }
            }
          });
        });

        // 定期检查更新（比如每1小时）
        setInterval(() => registration.update(), 3600000);
      }).catch(err => console.error('SW注册失败:', err));
    });
  }
}

同时在你的自定义SW里添加消息监听，支持跳过等待直接激活：

self.addEventListener('message', (event) => {
  if (event.data?.type === 'SKIP_WAITING') {
    self.skipWaiting();
  }
});

3. 确保SW文件内容触发浏览器更新 #

浏览器只会在SW文件内容发生变化时，才会认为有新版本发布。如果你的SW逻辑修改后，生成的service-worker.js内容和旧版本一致（比如只是修改了业务代码，没改SW配置），浏览器不会更新SW。

• 最简单的办法：每次发布时，在sw-build.js里加一个版本号注释，比如// SW_VERSION: 1.0.2，这样每次build后SW文件内容会变化，浏览器会检测到更新。

4. 检查浏览器SW状态和缓存 #

打开Chrome DevTools → Application → Service Workers，查看：

• 当前激活的SW版本是否是最新的
• 是否有处于waiting状态的SW（如果有，说明浏览器已检测到更新，但需要用户关闭页面或刷新才能激活）
• 点击「Unregister」注销旧SW，再清除「Cache Storage」里的旧缓存，然后刷新页面测试

5. 验证Network First策略的实际执行 #

打开DevTools → Network，勾选「Offline」测试离线场景，再取消勾选测试在线场景：

• 在线时：请求应该优先走网络，并且会更新缓存
• 离线时：请求会从缓存读取内容

如果在线时还是返回旧内容，大概率是SW没更新，或者缓存名称没加版本号导致旧缓存未被替换。

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