Workbox Background Sync正则匹配含/api/的URL不生效问题

该问题由两个核心原因导致：

1. 正则表达式语法存在错误 #

你编写的 new RegExp(/.*/api/.*/) 不符合正则语法规则：正则字面量中/是正则的定界符，若要匹配URL中的/字符，需要对其做转义处理。同时你混用了正则字面量和RegExp构造函数两种写法，属于用法错误：

• 若使用正则字面量，正确写法为 /.*\/api\/.*/
• 若使用RegExp构造函数，需要传入字符串格式的规则，且转义符需要二次转义，正确写法为 new RegExp('.*\\/api\\/.*')

2. Workbox 跨域请求匹配规则限制 #

Workbox 默认的正则匹配逻辑中，仅同源请求下只匹配路径部分的正则会生效，跨域请求的正则需要匹配完整的URL（包含协议、域名的全路径）才能命中规则，这也是你指定具体域名后功能正常的原因。

另外需要注意：no-cors模式的跨域POST请求无法被Service Worker捕获，需要确保你的/api/请求的mode为cors。

正确实现方案 #

推荐使用匹配回调函数写法，同域、跨域场景都能正常生效，无需处理正则歧义：

registerRoute(
  ({url, request}) => request.method === 'POST' && url.pathname.includes('/api/'),
  new NetworkOnly({
    plugins: [bgSyncPlugin]
  })
);

如果要使用正则写法，直接使用正确转义的正则字面量即可：

registerRoute(
  /\/api\//,
  new NetworkOnly({
    plugins: [bgSyncPlugin]
  }),
  'POST'
);

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