工作箱后台同步无法匹配正则表达式

Posted 2023-03-10

【中文标题】工作箱后台同步无法匹配正则表达式

【英文标题】：Workbox background sync cant match Regex

【发布时间】：2021-12-17 22:23:18

【问题描述】：

当使用工作箱后台同步插件时，我必须创建一个路由来捕获请求。但我想捕获所有包含 /api/

的网址

来自Documentation 这是默认的正则表达式//api/./.json/

registerRoute(
  /\/api\/.*\/*.json/,
  new NetworkOnly(
    plugins: [bgSyncPlugin]
  ),
  'POST'
);

正则表达式将匹配https://example.com /api/test.json

我试图这样做以匹配所有在 url 中包含 /api/ 的 url 例如：

https://example.com/api/user/add/ 和 https://somethingelse.com/api/todo/add/

但出于某种原因，当我这样做时：

registerRoute(
  new RegExp(/.*\/api\/.*/),
  new NetworkOnly(
    plugins: [bgSyncPlugin]
  ),
  'POST'
);

后台同步插件无法捕获发布请求。我不明白为什么它不起作用，正则表达式在regex101 中测试时确实匹配

为什么工作箱后台同步插件无法在https://example.com/api/users/ 上与new RegExp('.*\/api\/.*/') 一起使用

我也确认这是问题所在。当专门匹配我的域 url 时，它可以工作。

【参考方案1】：

Workbox documentation 中有一些关于此的背景：

就像字符串匹配一样，不同来源的请求是 区别对待。而不是匹配 URL 的任何部分， 正则表达式必须从 URL 的开头匹配 为了在有跨域请求时触发路由。

例如，前面的正则表达式 new RegExp('/blog/\\d4/\\d2/.+') 不会匹配 https://some-other-origin.com/blog/<year>/<month>/<post title slug>。 如果我们想要一个匹配通用路径模式的路由 针对同源和跨源请求，使用常规 开头带有通配符 (.+) 的表达式是一种方法：

因为这最终可能会很尴尬，所以我们开始鼓励人们使用 callback functions 作为标准：

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

【讨论】：

在文档中完全没有看到，那么如何匹配正则表达式就是问题所在。无论如何，回调函数看起来比正则表达式好得多。谢谢！