React/Next.js PWA在Safari更新后重启回退旧版本求助

问题描述 #

基于React/Next.js的Web应用添加PWA和Service Worker后，首次发布正常，但后续版本更新时出现异常：用户收到更新提示，完成更新并重启应用后，页面回退到旧版本，且仅部分手机出现该问题。

代码问题排查 #

从提供的Service Worker代码来看，核心问题集中在注册更新流程的竞态条件、缓存清理逻辑不严谨和页面刷新时机错误：

1. 先卸载所有现有Service Worker再重新注册，可能导致旧SW未完全卸载时新SW已注册，部分设备上旧SW仍会控制页面
2. registration.update()后立即刷新页面，此时新SW可能未完成激活，页面仍由旧SW接管
3. 缓存清理逻辑中，缓存命名未与版本号强绑定，导致旧版本缓存无法被精准删除

修复步骤 #

1. 重构Service Worker注册与更新流程 #

移除先卸载所有注册的操作，改为监听更新事件，等待新SW激活后再刷新页面：

navigator.serviceWorker.register(serviceFilePath, { scope: _this.options.scope })
  .then(registration => {
    console.info("Service worker registered for scope: " + registration.scope);

    // 监听新SW安装事件
    registration.addEventListener('updatefound', () => {
      const newWorker = registration.installing;
      newWorker.addEventListener('statechange', () => {
        if (newWorker.state === 'installed') {
          // 旧SW仍在控制页面，提示用户更新
          if (navigator.serviceWorker.controller) {
            if (confirm('新版本已准备好，是否立即更新？')) {
              newWorker.postMessage({ type: 'SKIP_WAITING' });
            }
          }
        }
      });
    });

    // 检查是否有已安装等待激活的SW
    if (registration.waiting) {
      if (confirm('新版本已准备好，是否立即更新？')) {
        registration.waiting.postMessage({ type: 'SKIP_WAITING' });
      }
    }

    // 监听SW控制器变化，新SW激活后自动刷新页面
    navigator.serviceWorker.addEventListener('controllerchange', () => {
      window.location.reload();
    });

    return true;
  })
  .catch(err => console.error('Service worker registration failed:', err));

2. 在Service Worker脚本中添加激活逻辑 #

在你的Service Worker主脚本中添加消息监听，允许跳过等待直接激活：

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

3. 修正缓存清理逻辑 #

确保每个版本的缓存名称与版本号绑定，精准删除旧版本缓存：

// 修改BrowserCache构造函数，缓存名称带上版本号
function BrowserCache(baseStorageName, version) {
  this.storageName = `${baseStorageName}-v${version}`;
}

// 保留原reload函数逻辑，此时删除的是对应版本的独立缓存
ServiceWorker.prototype.reload = function () {
  var _this = this;
  return this.getOptions(true).then(function (options) {
    return Promise.all([
      _this.preload(),
      _this.checkPushServiceStatus(false)
    ]).then(function () {
      _this.debug("Clear old caches... (< v" + options.version + ")");
      var promises = [];
      for (var i = 0; i < options.version; i++) {
        promises.push(new AdvancedServiceWorker.BrowserCache(options.storageName, i).remove());
      }
      return Promise.all(promises).then(function () {
        return true;
      });
    });
  }).catch(function () {
    return false;
  });
};

4. 适配Next.js静态资源缓存 #

确保Next.js配置中静态资源带有哈希后缀（默认已开启），避免浏览器缓存旧资源：

• 检查next.config.js中未禁用静态资源哈希
• 确保服务器对service-worker.js设置Cache-Control: no-cache，避免浏览器缓存旧的SW脚本

验证方式 #

1. 发布新版本后，打开应用确认收到更新提示
2. 确认更新后，检查浏览器Application > Service Workers面板，旧SW已被卸载，新SW处于激活状态
3. 在出现问题的手机上测试，验证页面不会回退到旧版本

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