同域名切换技术栈后，如何强制用户自动清除本地缓存？

嘿，这个问题我之前帮好几个开发者踩过坑，CRA自带的Service Worker缓存确实在部署新版本时容易让用户停留在旧页面。下面是几个能让用户自动更新到新版本的靠谱办法：

1. 启用CRA内置的SW自动更新逻辑 #

CRA的serviceWorker.js其实已经自带了版本检测能力，但默认配置没有触发自动刷新。你可以修改src/index.js里的注册代码：

import * as serviceWorkerRegistration from './serviceWorkerRegistration';

// 替换原来的serviceWorkerRegistration.register()
serviceWorkerRegistration.register({
  onUpdate: (registration) => {
    // 发送消息让等待中的SW激活
    registration.waiting.postMessage({ type: 'SKIP_WAITING' });
    // 自动刷新页面加载新版本
    window.location.reload();
  }
});

原理是：当浏览器检测到新的service-worker.js文件（CRA打包时会自动更新SW的内容哈希），就会触发onUpdate回调，我们通过发送SKIP_WAITING消息让新SW立即激活，然后刷新页面就能加载新内容了。

2. 给缓存添加版本号（自定义SW场景） #

如果你用了自定义的Service Worker（比如基于cra-template-pwa扩展），可以给缓存名称加上版本标识，每次部署新版本时更新这个版本号：

// 比如原来的缓存名
// const CACHE_NAME = 'my-app-cache';
// 改成带版本号的
const CACHE_NAME = 'my-app-cache-v3';

这样新SW安装时会创建新的缓存，旧的缓存可以在activate事件里添加清理逻辑，用户下次访问就会加载新资源。

3. 服务器端配置正确的缓存控制头 #

这是最关键的一步，很多缓存问题都是服务器配置不对导致的：

• 带哈希的静态资源：CRA打包出来的static/js/main.*.js、static/css/main.*.css这些文件都带唯一哈希，服务器可以设置：
  Cache-Control: public, max-age=31536000, immutable
  因为哈希变了就是全新文件，浏览器可以长期缓存，不用每次检查更新。
• 不带哈希的核心文件：index.html、service-worker.js、manifest.json这些文件没有哈希，必须设置：
  Cache-Control: no-cache 或者 max-age=0, must-revalidate
  这样浏览器每次都会去服务器检查是否有新版本，确保能获取到最新的SW和入口文件。

4. 应急强制清除缓存方案 #

如果已经部署了新版本，但用户还是看到旧页面，可以临时加一段版本检测逻辑：

1. 在public目录下创建一个version.json文件，内容比如：{"version": "v3"}
2. 在应用入口文件里添加检测逻辑：

fetch('/version.json')
  .then(res => res.json())
  .then(data => {
    const currentVersion = localStorage.getItem('appVersion');
    if (currentVersion !== data.version) {
      // 注销旧的Service Worker
      navigator.serviceWorker.getRegistrations().then(regs => {
        regs.forEach(reg => reg.unregister());
      }).then(() => {
        localStorage.setItem('appVersion', data.version);
        window.location.reload();
      });
    }
  });

这样用户打开页面时会对比本地存储的版本和服务器上的版本，如果不一致，就强制注销旧SW并刷新页面，确保加载新版本。

注意事项 #

• 一定要在生产环境测试，CRA的Service Worker在开发环境默认是不启用的；
• 如果用了CDN，要确保CDN的缓存策略和服务器一致，避免CDN缓存旧的index.html或service-worker.js；
• 测试时可以用浏览器的“Application”面板（Chrome/Firefox开发者工具）手动清除SW缓存，验证更新逻辑是否生效。

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