使用React自带workbox service worker部署更新后如何自动刷新缓存？

核心原因 #

Create React App 自带的基于Workbox的Service Worker默认采用「等待所有已打开的站点标签页关闭后才激活新版本」的策略，因此部署更新后用户打开的旧标签页会一直加载缓存的旧资源，直到用户手动关闭所有页面重开。

可用解决方案 #

方案1：监听更新事件自动触发刷新（无侵入，无需修改SW源码） #

直接修改项目中src/index.js（或src/index.tsx）的Service Worker注册逻辑：

import * as serviceWorkerRegistration from './serviceWorkerRegistration';

// 修改原有注册代码，添加onUpdate回调
serviceWorkerRegistration.register({
  onUpdate: (registration) => {
    if (registration.waiting) {
      // 选择1：静默强制刷新，用户无感知，适合小型工具类站点
      registration.waiting.postMessage({ type: 'SKIP_WAITING' });
      window.location.reload();

      // 选择2：弹出更新提示，用户确认后再刷新，避免打断用户正在进行的操作
      // if (window.confirm('站点已发布新版本，是否立即刷新加载？')) {
      //   registration.waiting.postMessage({ type: 'SKIP_WAITING' });
      //   window.location.reload();
      // }
    }
  }
});

CRA v4及以上版本自带的Service Worker已内置对SKIP_WAITING消息的监听，无需额外修改SW源码即可生效。

方案2：调整缓存策略（可选，适合自定义需求场景） #

如果需要更细粒度的缓存控制，可通过craco、react-app-rewired或者eject项目后修改Workbox配置：

• 对入口html文件设置网络优先的缓存策略，避免入口文件被长期缓存导致无法触发SW更新
• 确保静态资源的哈希命名规则正常生效，每次构建都会生成带新哈希的资源文件
• 示例Workbox配置片段：

// 仅当你自定义Workbox配置时需要添加
new workbox.strategies.NetworkFirst({
  cacheName: 'html-cache',
  matchOptions: {
    ignoreSearch: true
  }
})

必要部署配置 #

无论用哪种方案，都需要保证服务器对service-worker.js文件没有设置强缓存，否则浏览器会长期使用旧的SW文件永远检测不到更新，建议给该文件添加响应头：
Cache-Control: no-cache

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