如何将URL从create-react-app的service-worker URL屏蔽中豁免

我完全懂你的困扰——用Create React App搭的PWA默认会让Service Worker接管所有路由请求，结果像example.com/my-url这种路径被硬生生指向SPA的默认Router，根本到不了你想要的实际文件/URL。下面给你几个实用方案，根据你的项目状态选就行：

方法一：自定义Service Worker（最灵活可控） #

如果想完全掌控哪些路径不被Service Worker插手，直接自定义一个Service Worker文件是最直接的：

1. 在项目的public目录下新建service-worker.js，写入以下逻辑：

self.addEventListener('fetch', (event) => {
  // 匹配你要绕过的目标路径，这里以/my-url为例
  const targetPath = '/my-url';
  if (event.request.url.includes(targetPath)) {
    // 直接发起网络请求，不走Service Worker的缓存逻辑
    event.respondWith(fetch(event.request));
    return;
  }

  // 其他请求可以保留原来的缓存策略，要是之前用了Workbox，也可以在这里复用它的逻辑
});

2. 修改src/service-workerRegistration.js里的注册路径，确保指向你自定义的文件：

if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    // 指向public目录下的自定义service-worker.js
    const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
    // 保留原有的注册检查逻辑即可
    if (swUrl) {
      navigator.serviceWorker.register(swUrl).then(registration => {
        // ... 原有的注册成功/更新逻辑
      }).catch(error => {
        console.error('Service Worker注册失败:', error);
      });
    }
  });
}

方法二：用工具修改Workbox配置（无需eject项目） #

要是你的项目用了默认的PWA模板（基于Workbox），不想完全重写Service Worker，可以用react-app-rewired或craco来修改Workbox的排除规则：

1. 先装依赖：

npm install react-app-rewired --save-dev

2. 在项目根目录创建config-overrides.js，添加配置：

module.exports = function override(config, env) {
  if (env === 'production') {
    // 找到Workbox的GenerateSW插件配置
    const workboxPlugin = config.plugins.find(plugin => plugin.name === 'GenerateSW');
    if (workboxPlugin) {
      // 把/my-url加入排除列表，不让Service Worker处理它
      workboxPlugin.config.exclude.push(/^\/my-url$/);
    }
  }
  return config;
};

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

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

这样构建生产包时，Workbox生成的Service Worker就会自动忽略/my-url路径，请求会直接打到服务器。

方法三：Eject后修改Webpack配置（非必要不推荐） #

要是你已经eject了项目，可以直接改Webpack里的Workbox插件配置：

在config/webpack.config.js中找到WorkboxPlugin.GenerateSW的配置块，添加exclude规则：

new WorkboxPlugin.GenerateSW({
  clientsClaim: true,
  skipWaiting: true,
  // 新增这行，排除/my-url路径
  exclude: [/^\/my-url$/],
}),

额外重要提示：服务器端配置 #

最后别忘了给你的服务器做对应配置，确保example.com/my-url真的能指向实际文件，而不是被服务器重定向到SPA的index.html。比如用Nginx的话，要加这样的location规则：

location /my-url {
  root /你的静态文件存放路径;
  try_files $uri $uri/ =404;
}

# SPA路由的原有规则保持不变
location / {
  try_files $uri $uri/ /index.html;
}

这样就能彻底确保/my-url请求被正确导向你要的资源，不会被Service Worker或服务器半路截胡了。

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