vue-cli + workbox not caching content

Question

I am using vue-cli v3.0.0.beta10 + the default integrated workbox, I added the following configuration in my vue.config.js file (located in my root folder):

pwa: {
        //pwa configs... 

        workboxOptions: {
        // ...other Workbox options...
        runtimeCaching: [ {
           urlPattern: new RegExp('/.*(?:googleapis)\.com.*$/'),
           handler: 'staleWhileRevalidate',
        }]
       }
}

I would expect my serviceworker to cache all json responses from my google api but instead nothing happens. I can't even see the Cache Storage in the developer toolbox under the "Application" tab. What am I missing? Please help :)

Answer 1

Your RegExp is not correct. The leading and trailing / should not be there since you are also wrapping the pattern in a string.

You can test the RegExp like this:

new RegExp('/.*(?:googleapis)\.com\/.*$/').exec('https://www.googleapis.com/tasks/v1/users/@me/lists')
=> null

Try removing the leading and trailing /:

new RegExp('.*(?:googleapis)\.com\/.*$').exec('https://www.googleapis.com/tasks/v1/users/@me/lists')
=> ["https://www.googleapis.com/tasks/v1/users/@me/lists", index: 0, input: "https://www.googleapis.com/tasks/v1/users/@me/lists", groups: undefined]