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

WorkBox 是运行 event.request.url 上的正则表达式，returns 完整 URL 像 http://localhost:3000 而不是相对的路径。

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

解决了这个问题

WorkBox 正在获取错误的 urlPattern

WorkBox is fetching wrong urlPattern

vuejs2

nuxt.js

workbox