WorkBox取错了urlPattern

Question

我正在使用Nuxt.js框架，其WorkBox配置如下所示

workbox: {
    workboxURL: 'https://cdn.jsdelivr.net/npm/workbox-sw@4.3.1/build/workbox-sw.min.js',
    cacheAssets: false,
    offline: false,
    runtimeCaching: [
      {
        urlPattern: '^/$|/(?:about|contact)$',
        handler: 'cacheFirst',
        strategyOptions: {
          cacheName: 'test-cache-v1',
          cacheExpiration: {
            maxEntries: 5,
            maxAgeSeconds: 10
          }
        }
      },
      {
        urlPattern: '/.*',
        handler: 'networkOnly',
      },
    ]
}

在这里，urlPattern: '^/$|/(?:about|contact)$'假设匹配所有3个请求：

/
/about
/contact

但是只有/about和/contact匹配，/由下一个缓存策略urlPattern: '/.*' (即networkOnly )处理。

不确定为什么WorkBox不能在cacheFirst策略中处理/请求

这就是ServiceWork.js文件内容的样子。

workbox.routing.registerRoute(new RegExp('^/$|/(?:about|contact)$'), workbox.strategies.cacheFirst({"cacheName":"test-cache-v1","cacheExpiration":{"maxEntries":5,"maxAgeSeconds":10}}), 'GET')

workbox.routing.registerRoute(new RegExp('/.*'), workbox.strategies.networkOnly({}), 'GET')

Answer 1

event.request.url上运行的是WorkBox，它返回像http://localhost:3000一样的完整URL，而不是相对路径。

因此通配符^/$无法处理请求。我通过将RegExp从^/$替换为^http://localhost:3000[/]?$来解决这个问题