WorkBox is fetching wrong urlPattern

I'm using Nuxt.js framework and my WorkBox config looks like below

workbox: {
    workboxURL: 'https://cdn.jsdelivr.net/npm/[email protected]/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',
      },
    ]
}

Here urlPattern: '^/$|/(?:about|contact)$' suppose to match all 3 requests:

/
/about
/contact

But only /about and /contact is matched and / is being handled by next cache strategy urlPattern: '/.*' which is networkOnly.

Not sure why WorkBox is not able to handle / request in cacheFirst strategy

This what ServiceWork.js file content looks like

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')

Solution

WorkBox is running RegExp on event.request.url which returns full URL like http://localhost:3000 instead of relative path.

So wildcard ^/$ was not able to handle the request. I fixed the issue by replacing my RegExp from ^/$ to ^http://localhost:3000[/]?$