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

Question

我有一个这样的 public 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 的响应未保存到缓存中。我想知道查询参数是否是这里的问题，或者我是否遗漏了什么？

Answer 1

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

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

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

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

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

Workbox runtime caching doesn't work with url with query parameter?

javascript

progressive-web-apps

workbox