sw-precache-config路径忽略规则不生效问题咨询

大概率你遇到的情况是：当浏览器完成缓存后，直接访问 myapp/api/route 这类API路径的导航请求，会被Service Worker的navigateFallback规则拦截，返回了index.html，而没有走runtimeCaching配置的networkOnly逻辑。

这是因为sw-precache生成的Service Worker中，navigateFallback的导航请求处理逻辑优先级高于runtimeCaching，当你把API路径当作导航请求（地址栏输入、外部链接跳转）访问时，会被优先匹配到fallback规则，而非API缓存规则。

你可以通过以下两种方式调整配置，解决这个问题：

方法1：用navigateFallbackWhitelist排除API路径 #

在配置中添加navigateFallbackWhitelist，指定只有非API路径才触发fallback逻辑：

module.exports = {
  staticFileGlobs: [
    'index.html',
    'manifest.json',
    'bower_components/webcomponentsjs/*',
  ],
  navigateFallback: 'index.html',
  // 正则匹配所有不包含/api/的路径，仅这类路径触发fallback
  navigateFallbackWhitelist: [/^(?!.*\/api\/).*$/],
  runtimeCaching: [{
    urlPattern: /.+\/api\/.+/,
    handler: 'networkOnly',
  }],
};

这样一来，任何包含/api/的导航请求都不会触发navigateFallback，会直接走runtimeCaching的networkOnly策略。

方法2：让runtimeCaching明确匹配导航请求 #

如果方法1效果不佳，你可以在runtimeCaching中添加options字段，指定匹配导航类型的请求，确保API导航请求被优先处理：

module.exports = {
  staticFileGlobs: [
    'index.html',
    'manifest.json',
    'bower_components/webcomponentsjs/*',
  ],
  navigateFallback: 'index.html',
  runtimeCaching: [{
    urlPattern: /.+\/api\/.+/,
    handler: 'networkOnly',
    options: {
      // 明确匹配导航类型的请求（地址栏输入、外部链接跳转）
      navigate: true,
    },
  }],
};

配置后，即使是导航请求的API路径，也会被runtimeCaching规则优先捕获，使用networkOnly策略处理。

1. 重新生成Service Worker文件
2. 清除浏览器现有缓存和已注册的Service Worker
3. 先访问应用主页完成资源缓存
4. 直接在地址栏输入myapp/api/route测试，此时应该能正常返回API响应，而非index.html

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