Workbox 运行时缓存不适用于带有查询参数的 url？

【问题标题】：Workbox runtime caching doesn't work with url with query parameter?Workbox 运行时缓存不适用于带有查询参数的 url？
【发布时间】：2020-11-10 16:02:30
【问题描述】：

我有一个这样的公共 API 端点：

https://data.weather.gov.hk/weatherAPI/opendata/weather.php?dataType=warnsum&lang=en

我想用服务工作者运行时缓存它的响应。这就是我定义路线的方式：

registerRoute(
  new RegExp('.+/weatherAPI/opendata/weather.php?dataType=warnsum&lang=en'),
  new StaleWhileRevalidate({
    cacheName: 'weatherApi',
    plugins: [
      new ExpirationPlugin({
        maxAgeSeconds: 60 * 60 * 24
      }),
      new BackgroundSyncPlugin('getWeatherAPI', {
        maxRetentionTime: 24 * 60 // Retry for max of 24 Hours (specified in minutes)
      })
    ]
  })
)

但是，这不起作用，并且此 url 的响应未保存到缓存中。我想知道查询参数是否会成为这里的问题，或者我是否遗漏了什么？

【问题讨论】：

标签： javascript progressive-web-apps workbox

【解决方案1】：

在 Workbox 中执行 RegExpRoute 匹配时会包含查询参数。

我认为您更有可能需要转义正则表达式中“特殊”的字符，例如?。

使用正则表达式以外的东西实际上可能更容易。例如，您可以使用matchCallback，例如：

registerRoute(
  ({url}) => url.href.endsWith('/weatherAPI/opendata/weather.php?dataType=warnsum&lang=en'),
  new StaleWhileRevalidate({...}),
)

【讨论】：

谢谢杰夫，它成功了。还有一个问题，在我将它保存到缓存之后，如果它是在缓存过期之前发出的，Service Worker 会自动拦截并取消我的请求吗？我需要为这种行为编写任何代码吗？
因为我仍然看到缓存后发送的请求。是不是因为缓存策略StaleWhileRevalidate？
是的，如果你使用StaleWhileRevalidate，总会有网络请求。如果您想在到期之前避免网络请求，您可以尝试使用 CacheFirst 和 ExpirationPlugin。