从Create React App迁移至Next.js后Service Worker缓存问题求助

我之前也遇到过类似的迁移缓存坑，咱们来一步步拆解你的问题，以及可行的修复方案：

你之前操作的核心问题 #

你把注销旧Service Worker的代码放在了public/service-worker.js里，这其实是矛盾的——旧的Service Worker已经控制了用户的浏览器，它会优先拦截请求并返回缓存的旧资源，新的service-worker.js可能根本没机会被执行。

浏览器的Service Worker机制是：只有当现有Service Worker被注销/更新，且页面刷新后，新的Service Worker才会生效。但你的注销逻辑写在新的Service Worker文件里，旧的Service Worker还在运行时，这个逻辑根本触发不了。

正确的修复步骤 #

1. 移除无效的service-worker.js文件 #

先把你放在public目录或项目根目录的service-worker.js删掉，避免后续混淆。

2. 在页面主代码中尽早执行注销逻辑 #

把注销旧Service Worker的代码放在Next.js的全局入口（比如_app.js或_document.js），而且要尽可能早执行，不要等window.load，确保页面加载时第一时间清理旧的Service Worker：

// 在 _app.js 的最顶部，或者 useEffect 中优先执行
useEffect(() => {
  if ("serviceWorker" in navigator) {
    navigator.serviceWorker.getRegistrations()
      .then((registrations) => {
        // 批量注销所有已注册的Service Worker
        return Promise.all(registrations.map(reg => reg.unregister()));
      })
      .then((results) => {
        // 只要有注销成功的，就强制刷新页面（用replace避免回退到旧缓存）
        const hasUnregistered = results.some(success => success);
        if (hasUnregistered) {
          window.location.replace(window.location.href);
        }
      })
      .catch(err => {
        console.error("注销旧Service Worker失败:", err);
      });
  }
}, []);

3. 配置HTTP头禁止缓存关键资源 #

在next.config.js中添加缓存控制头，确保浏览器不会缓存service-worker.js（如果后续需要重新注册新的），以及页面入口文件：

// next.config.js
module.exports = {
  async headers() {
    return [
      {
        source: '/(service-worker.js|index.html)',
        headers: [
          {
            key: 'Cache-Control',
            value: 'no-cache, no-store, must-revalidate',
          },
        ],
      },
    ];
  },
};

额外兜底方案 #

如果还是有少量用户的旧缓存无法清理，可以在页面顶部添加一个醒目的提示：

网站已完成更新，请点击下方按钮刷新以获取最新版本

搭配一个按钮，点击时执行以下逻辑：

const handleForceRefresh = () => {
  if ("serviceWorker" in navigator) {
    navigator.serviceWorker.getRegistrations()
      .then(regs => Promise.all(regs.map(r => r.unregister())))
      .then(() => {
        // 强制刷新并跳过缓存
        window.location.reload(true);
      });
  } else {
    window.location.reload(true);
  }
};

为什么之前的方法无效？ #

旧的Service Worker处于激活状态时，会拦截所有页面请求，优先返回它缓存的旧资源——包括你的新service-worker.js文件。这就导致你的注销逻辑根本没机会被浏览器执行，自然无法清理旧缓存。

把逻辑放在页面主代码里，就能绕开Service Worker的拦截，在页面加载时直接操作浏览器的Service Worker注册列表，从根源上注销旧的实例。

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