我太懂这种缓存顽疾的痛苦了——Service Worker的缓存机制一旦生效，想要推更新给老用户简直像拆顽固的旧零件。结合你React+Node的技术栈，给你几个实打实的程序化解决方案，按落地优先级排序：

Service Worker的缓存是独立于浏览器HTTP缓存的，所以光设置unregister不够，得主动清理旧缓存并触发更新：

第一步：优化Service Worker注册逻辑 #

在React项目的入口文件（比如src/index.js）里，加入更新监听逻辑，一旦检测到新的Service Worker，就提示用户刷新或者自动更新：

if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/service-worker.js')
      .then(registration => {
        // 监听Service Worker更新事件
        registration.addEventListener('updatefound', () => {
          const newWorker = registration.installing;
          newWorker.addEventListener('statechange', () => {
            if (newWorker.state === 'installed') {
              // 如果当前页面还在使用旧的Service Worker，触发更新
              if (navigator.serviceWorker.controller) {
                // 这里可以自定义提示，比如弹出模态框让用户确认刷新
                alert('应用有新版本可用，请刷新页面获取更新！');
                // 也可以直接强制刷新（谨慎使用，避免打断用户操作）
                // window.location.reload(true);
              }
            }
          });
        });
      })
      .catch(err => console.log('Service Worker注册失败:', err));
  });
}

第二步：在Service Worker中添加缓存清理逻辑 #

修改你的service-worker.js（如果用Create React App的workbox集成，可能是src/service-worker.js），在激活阶段删除所有非白名单的旧缓存：

self.addEventListener('activate', (event) => {
  // 这里的缓存名称要带上版本号，每次更新代码就修改版本号
  const allowedCacheNames = ['v2-your-ecommerce-app-cache'];
  
  event.waitUntil(
    caches.keys().then(cacheNames => {
      return Promise.all(
        cacheNames.map(cacheName => {
          if (!allowedCacheNames.includes(cacheName)) {
            // 删除旧缓存
            return caches.delete(cacheName);
          }
        })
      );
    })
  );
});

关键：每次发布新版本时，一定要修改allowedCacheNames里的版本号，这样激活新Service Worker时会自动清理旧缓存。

React的Create React App默认会在构建时给JS/CSS文件添加内容哈希（比如main.abc123.js），但如果你的Node服务器错误地缓存了index.html，用户还是会加载旧的资源引用。

给index.html设置严格的不缓存策略 #

在你的Node（比如Express）服务器中，单独处理index.html的请求，强制浏览器每次都拉取最新版本：

const express = require('express');
const path = require('path');
const app = express();

// 处理静态资源（带哈希的JS/CSS/图片），设置合理的缓存时间
app.use(express.static(path.join(__dirname, 'build'), {
  maxAge: '1h', // 静态资源缓存1小时，因为有哈希，内容变化时文件名会变，不影响更新
}));

// 单独处理首页请求，禁止缓存
app.get('/', (req, res) => {
  res.setHeader('Cache-Control', 'no-cache, no-store, must-revalidate');
  res.setHeader('Pragma', 'no-cache');
  res.setHeader('Expires', '0');
  res.sendFile(path.join(__dirname, 'build', 'index.html'));
});

app.listen(3000, () => console.log('服务器启动成功'));

针对已经加载了旧版本的用户，可以在客户端加入版本对比逻辑，一旦发现服务器有新版本，就强制清理缓存并刷新：

第一步：构建时生成版本文件 #

在package.json的build脚本中添加生成版本文件的命令，每次构建都会生成唯一的版本号：

"scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build && echo '{\"version\": \"'$(date +%Y%m%d%H%M)'\"}' > build/version.json",
  "test": "react-scripts test",
  "eject": "react-scripts eject"
}

第二步：在React组件中检测版本并更新 #

在你的根组件（比如src/App.js）中加入版本检测逻辑：

import { useEffect } from 'react';

function App() {
  useEffect(() => {
    // 从服务器拉取最新版本号
    fetch('/version.json')
      .then(res => res.json())
      .then(data => {
        const latestVersion = data.version;
        const storedVersion = localStorage.getItem('appVersion');

        if (storedVersion && storedVersion !== latestVersion) {
          // 版本不一致，清理缓存并刷新
          localStorage.setItem('appVersion', latestVersion);
          
          // 注销旧的Service Worker
          if ('serviceWorker' in navigator) {
            navigator.serviceWorker.getRegistrations().then(registrations => {
              registrations.forEach(reg => reg.unregister());
            });
          }

          // 强制刷新页面，忽略浏览器缓存
          window.location.reload(true);
        } else if (!storedVersion) {
          // 首次加载，保存当前版本
          localStorage.setItem('appVersion', latestVersion);
        }
      })
      .catch(err => console.log('版本检测失败:', err));
  }, []);

  return (
    // 你的应用内容
  );
}

export default App;

如果以上方法都没能覆盖所有用户，可以在Node服务器端给所有请求添加严格的缓存控制头，但这会牺牲静态资源的缓存性能，建议只在紧急故障时临时使用：

app.use((req, res, next) => {
  // 对所有请求设置不缓存
  res.setHeader('Cache-Control', 'no-cache, no-store, must-revalidate');
  res.setHeader('Pragma', 'no-cache');
  res.setHeader('Expires', '0');
  next();
});

内容的提问来源于stack exchange，提问作者Sávio Muniz