单页应用切换路由时如何更新service-worker.js？

首先咱们得明确：Create React App默认用Workbox管理Service Worker，默认的更新检查只在页面加载时触发。要实现路由切换时也检查更新，咱们可以借助React Router的路由变化事件，手动调用Service Worker的更新检查方法，下面是具体步骤：

步骤1：确认Service Worker已正确注册 #

先确保你的项目已经启用了Service Worker（CRA生产环境默认启用，开发环境需要额外配置），src/index.js里的注册代码应该类似这样：

import * as serviceWorkerRegistration from './serviceWorkerRegistration';

// ... 其他业务代码

serviceWorkerRegistration.register({
  onUpdate: (registration) => {
    // 这里保留你现有的更新通知逻辑，比如提示用户"有新内容，点击刷新"
    registration.waiting.postMessage({ type: 'SKIP_WAITING' });
  },
  onSuccess: (registration) => {
    console.log('Service Worker注册成功:', registration);
  }
});

步骤2：监听路由变化并触发更新检查 #

在你的根路由组件（比如App.js）中，用React Router的useLocation钩子监听路由路径变化，每次路径切换时触发Service Worker更新检查：

import { useLocation, useEffect } from 'react';
import * as serviceWorkerRegistration from './serviceWorkerRegistration';

function App() {
  const location = useLocation();

  useEffect(() => {
    const checkForSWUpdate = async () => {
      if ('serviceWorker' in navigator) {
        try {
          // 获取已注册的Service Worker实例
          const registration = await serviceWorkerRegistration.getRegistration();
          if (registration) {
            // 手动触发更新检查
            await registration.update();
            // 如果有新的Service Worker等待激活，你的onUpdate回调会自动触发
          }
        } catch (error) {
          console.error('检查Service Worker更新失败:', error);
        }
      }
    };

    checkForSWUpdate();
  }, [location.pathname]); // 依赖路由路径变化，每次切换路由都执行检查

  // ... 你的路由组件及其他业务内容
  return (
    // ... 你的JSX结构
  );
}

export default App;

步骤3：优化与注意事项 #

• 避免频繁请求：如果你的应用路由切换非常频繁（比如用户快速点击导航），可以添加防抖逻辑，减少不必要的网络请求：

  import { useLocation, useEffect, useRef } from 'react';
  
  function App() {
    const location = useLocation();
    const debounceTimeout = useRef(null);
  
    useEffect(() => {
      const checkForSWUpdate = async () => {
        // ... 同上的检查逻辑
      };
  
      // 防抖：300ms内再次切换路由则取消之前的检查
      if (debounceTimeout.current) {
        clearTimeout(debounceTimeout.current);
      }
      debounceTimeout.current = setTimeout(checkForSWUpdate, 300);
  
      return () => clearTimeout(debounceTimeout.current);
    }, [location.pathname]);
  
    // ...
  }
  

• 缓存配置验证：你已经设置了service-worker.js的Cache-Control: max-age=0，这很关键，确保浏览器每次检查时都会请求服务器最新的service-worker文件，不会复用缓存版本。
• 更新逻辑兼容：触发检查后，之前的onUpdate回调会正常工作，用户依然会收到更新提示，刷新页面即可激活新版本。

这样配置后，用户每次切换路由时都会自动检查Service Worker更新，无需等待页面关闭再打开就能触发更新流程了。

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