如何在安装Service Worker时缓存React动态路由？

嘿，我懂你碰到的这个问题——动态路由/:id离线刷新就报错，根源就是Service Worker安装时没法预知所有可能的id值，自然没法提前缓存这些路径。不过别担心，有几个靠谱的解决办法：

方案1：修改Fetch事件，让动态路由 fallback 到缓存的index.html #

因为React是单页应用，所有路由最终都是由前端的React Router处理的，所以只要离线时能返回index.html，应用就能自己解析动态路由并渲染对应的页面。

你可以把public/sw.js里的fetch事件逻辑改成这样：

this.addEventListener('fetch', (event) => {
  // 处理页面导航请求（比如刷新、直接输入URL）
  if (event.request.mode === 'navigate') {
    event.respondWith(
      // 先尝试从网络获取最新页面
      fetch(event.request)
        .then((response) => {
          // 成功的话把页面缓存起来，下次离线就能用
          caches.open(CACHE_NAME).then((cache) => {
            cache.put(event.request, response.clone());
          });
          return response;
        })
        .catch(() => {
          // 离线时直接返回缓存的index.html
          return caches.match('/index.html');
        })
    );
  } else {
    // 处理静态资源（JS、CSS、图片等），用缓存优先策略
    event.respondWith(
      caches.match(event.request).then((cachedResponse) => {
        // 有缓存就返回，同时后台去网络更新缓存
        const networkFetch = fetch(event.request).then((networkResponse) => {
          caches.open(CACHE_NAME).then((cache) => {
            cache.put(event.request, networkResponse.clone());
          });
          return networkResponse;
        });
        return cachedResponse || networkFetch;
      })
    );
  }
});

这个逻辑的核心是：所有页面导航请求（包括动态路由），优先走网络，成功就缓存；离线时直接返回index.html，让React Router处理路由匹配。静态资源则用缓存优先，同时后台更新，保证离线时也能加载。

方案2：预缓存已知的动态路由（仅限id数量有限的场景） #

如果你的动态路由对应的id是固定且数量不多（比如只有几个详情页），那可以直接在Service Worker安装时把这些路径加进缓存列表：

this.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open(CACHE_NAME).then((cache) => {
      cache.addAll([
        '/static/js/main.chunk.js',
        '/static/js/0.chunk.js',
        '/static/js/bundle.js',
        '/index.html',
        '/',
        '/1', // 已知的id路径
        '/2',
        '/3'
      ]);
    }),
  );
});

但这个方法只适合id数量固定的情况，如果id是用户生成或者数量很多，就完全不适用了。

方案3：用Workbox简化Service Worker配置 #

如果手写SW逻辑觉得麻烦，推荐用Google的Workbox库，它专门帮你处理各种缓存策略，尤其是单页应用的动态路由问题。

修改public/sw.js为：

// 引入Workbox库
importScripts('https://storage.googleapis.com/workbox-cdn/releases/6.4.1/workbox-sw.js');

// 静态资源用缓存优先策略
workbox.routing.registerRoute(
  ({ request }) => 
    request.destination === 'script' || 
    request.destination === 'style' || 
    request.destination === 'image',
  new workbox.strategies.CacheFirst({ cacheName: 'static-resources' })
);

// 所有导航请求（包括动态路由）用网络优先，离线时返回缓存的index.html
const navigationRoute = new workbox.routing.NavigationRoute(
  new workbox.strategies.NetworkFirst({ cacheName: 'html-cache' })
);
workbox.routing.registerRoute(navigationRoute);

Workbox会自动帮你处理路由匹配、缓存更新这些细节，省心很多。

最后几个注意点 #

• 修改SW后，要更新CACHE_NAME（比如从appV1改成appV2），这样浏览器会检测到SW文件变化，触发重新安装和缓存更新。
• 调试时可以在Chrome DevTools的「Application -> Service Workers」里勾选「Update on reload」，确保每次刷新都能加载最新的SW。
• 确认src/swDev.js里的swUrl路径正确，保证Service Worker能成功注册。

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