React应用中ServiceWorker无法更新，进入skipwaiting状态的问题求助

这个问题确实挺闹心——每次发新版本用户都得手动清缓存，体验拉胯；但移除Service Worker又直接搞崩了路由。别慌，咱们一步步来搞定：

1. 让Service Worker自动激活新版本（跳过skipWaiting） #

默认情况下，新的Service Worker会进入等待状态，得等用户关闭所有打开的页面再重新打开才会激活。咱们可以修改SW逻辑，让它安装后直接上岗，同时接管所有客户端：

自定义Service Worker（项目支持的话） #

如果项目里有自定义的src/service-worker.js文件，直接加这段代码：

// 安装阶段跳过等待，直接进入激活流程
self.addEventListener('install', (event) => {
  self.skipWaiting();
});

// 激活阶段接管所有已打开的页面，并清理旧缓存
self.addEventListener('activate', (event) => {
  event.waitUntil(
    Promise.all([
      // 立即控制所有打开的客户端页面
      self.clients.claim(),
      // 删除旧版本的缓存资源，避免冗余
      caches.keys().then(cacheNames => {
        return Promise.all(
          cacheNames.filter(name => {
            // 替换成你的缓存命名规则，比如排除当前版本的缓存
            return !name.includes('v20240520');
          }).map(name => caches.delete(name))
        );
      })
    ])
  );
});

针对Create React App（未eject） #

如果用的是CRA默认的SW配置，不想eject的话可以用customize-cra修改：

1. 先装依赖：npm install customize-cra react-app-rewired --save-dev
2. 项目根目录创建config-overrides.js：

const { override, addServiceWorker } = require('customize-cra');

module.exports = override(
  addServiceWorker({
    skipWaiting: true,
    clientsClaim: true,
  })
);

3. 修改package.json里的脚本，换成react-app-rewired：

"scripts": {
  "start": "react-app-rewired start",
  "build": "react-app-rewired build",
  "test": "react-app-rewired test"
}

2. 友好通知用户更新（可选但推荐） #

自动激活SW后，最好给用户一个提示，避免页面状态异常。在src/index.js或者专门的SW注册文件里加这段：

let newServiceWorker;

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/service-worker.js')
    .then(registration => {
      registration.addEventListener('updatefound', () => {
        newServiceWorker = registration.installing;
        
        newServiceWorker.addEventListener('statechange', () => {
          if (newServiceWorker.state === 'installed' && navigator.serviceWorker.controller) {
            // 这里可以用你的UI组件替代alert，比如一个好看的弹窗
            alert('🎉 发现新版本啦！点击确定刷新页面查看更新');
            // 也可以自动刷新，但建议让用户确认：window.location.reload();
          }
        });
      });
    });
}

3. 修复路由404问题 #

你说移除SW后路由失效，其实这和Service Worker没关系——客户端路由需要服务器端配置支持。不管有没有SW，服务器都得把所有非静态资源的请求重定向到index.html，这样React Router才能接管路由：

常见服务器配置示例 #

• Nginx: 在站点配置里加：

  location / {
    try_files $uri $uri/ /index.html;
  }
  

• Apache: 创建.htaccess文件，写这些：

  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
  

• Netlify: 根目录创建_redirects文件，内容：

  /* /index.html 200
  

这样配置后，哪怕保留Service Worker，路由也能正常工作，不会出现404了。

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