vuejs2 - 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: '/. *' 仅网络。

不确定为什么 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

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

因此通配符 ^/$ 无法处理请求。我通过将我的正则表达式从 ^/$ 替换为 ^http://localhost:3000[/]?$

解决了这个问题