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

score 1 · Answer 1 · answered May 15 '18 at 16:02

1

Do you use workbox-webpack-plugin?

const workboxPlugin = require('workbox-webpack-plugin')

// vue.config.js
module.exports = {
  configureWebpack: {
    plugins: [
      new workboxPlugin({
        ...
        runtimeCaching: [ {
           urlPattern: new RegExp('/.*(?:googleapis)\.com.*$/'),
           handler: 'staleWhileRevalidate',
        }]
      })
    ]
  }
}

answered May 15 '18 at 16:02

ittus

21,730
5
57
57

workbox-webpack-plugin is included by default in vue-cli3.0.0-beta.10 – dnhyde May 27 '18 at 10:35

score 1 · Accepted Answer · answered May 17 '18 at 21:32

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]

answered May 17 '18 at 21:32

abraham

46,583
10
100
152

Thank you, this works but it only caches images from my google backend, do you know why it does not do the same with a list of json objects that I retrieve from the same backend service? – dnhyde May 27 '18 at 10:34
1

For anyone reading this thread, please notice that I am using a "staleWhileRevalidate" caching strategy. If you use "cacheFirst" you may want to check [this question](https://stackoverflow.com/questions/49295757/how-to-make-workbox-cache-cross-origin-responses?rq=1) and understand opaque responses – dnhyde May 27 '18 at 10:38

vue-cli + workbox not caching content

2 Answers2