WorkBox is fetching wrong urlPattern - vuejs2

Question

I'm using Nuxt.js framework and my WorkBox config looks like below
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',
},
]
}
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')

Answer 1

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[/]?$