如何让Create React App的Service Worker忽略指定URL？

看起来你遇到的问题是，虽然配置了navigateFallbackWhitelist来排除/__开头的URL，但这些请求还是被Service Worker导向了index.html。这可能是因为正则表达式的逻辑问题，或者缺少了让Service Worker完全绕过这些URL的关键配置，下面一步步帮你解决：

第一步：修正navigateFallbackWhitelist的正则逻辑 #

你的现有配置里，navigateFallbackWhitelist的正则写法存在逻辑冗余，而且可能因为语法细节导致规则未生效。你需要明确：只有非/__、非/que开头的URL才触发回退到index.html，把规则合并成一个精准的正则：

navigateFallbackWhitelist: [/^(?!\/__|\/que).*/],

这个正则的意思是：匹配所有既不是以/__开头，也不是以/que开头的URL，只有这些URL才会触发回退逻辑。这样/__和/que开头的URL就会被排除在外，不会被Service Worker强制导向index.html。

第二步：添加Runtime缓存规则，让指定URL完全绕过Service Worker #

如果希望Service Worker完全不处理这些URL（包括不缓存、不拦截请求），还需要在SWPrecacheWebpackPlugin的配置中添加runtimeCaching规则，明确让这些URL直接走网络请求：

new SWPrecacheWebpackPlugin({
  // 修正原有正则的语法错误（之前结尾多了一个/）
  dontCacheBustUrlsMatching: /\.\w{8}\./,
  filename: "service-worker.js",
  logger(message) {
    if (message.indexOf("Total precache size is") === 0) {
      return;
    }
    if (message.indexOf("Skipping static resource") === 0) {
      return;
    }
    console.log(message);
  },
  minify: true,
  navigateFallback: publicUrl + "/index.html",
  navigateFallbackWhitelist: [/^(?!\/__|\/que).*/],
  staticFileGlobsIgnorePatterns: [/\.map$/, /asset-manifest\.json$/],
  // 添加这部分规则，让指定URL绕过Service Worker
  runtimeCaching: [
    {
      urlPattern: /^\/__/,
      handler: "networkOnly", // 完全绕过缓存，直接走网络请求
      options: {
        cache: {
          name: "ignored-__-urls"
        }
      }
    },
    {
      urlPattern: /^\/que/,
      handler: "networkOnly",
      options: {
        cache: {
          name: "ignored-que-urls"
        }
      }
    }
  ]
}),

这里的networkOnly处理器会告诉Service Worker，对于匹配规则的URL，直接使用浏览器的网络请求，不会触发任何缓存或回退逻辑。

额外注意：修正原有配置的语法错误 #

你之前的dontCacheBustUrlsMatching正则多了一个结尾的/，这会导致配置解析异常，影响其他规则的生效，已经在上面的代码里修正了。

完成这些修改后，重新构建你的应用，Service Worker就会正确忽略/__和/que开头的URL，不会再把它们导向index.html了。

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