Pwa-module: WorkBox configuration problem

[sq-zhou]

When I configure pwa workbox module，runtimeCaching configuration urlPattern is a resource picture of the site, this site and my official domain name is not consistent.

Example:

runtimeCaching: [{
  urlPattern: 'localhost:3000/.*',
  handler: 'cacheFirst',
  method: 'GET'
},{
  urlPattern: 'https://assets.***.net/.*',
  handler: 'cacheFirst',
  method: 'GET'
}]

https: //assets..net/ related to the picture of the API, I would like to save some pictures through this website api (in the service worker)
Unfortunately, when I build and start nuxtjs-start-demo, the workbox module gives an error on the chrome console: *The response does not meet the criteria for being added to the cache.
And application has no related image caches.

This is because https: //assets.*.net/ is an external link which need cross-domain, so workbox can not cache the site's picture?
there are other ways to solve this problem？

_{This question is available on Nuxt.js community (#c24)}

[awronski]

@sq-zhou Caching images is working for me.
My runtime:

    runtimeCaching: [
      {
        urlPattern: 'http://127.0.0.1/client/.*',
        handler: 'cacheFirst',
        method: 'GET'
      },
      {
        urlPattern: 'https://xxxx.cloudfront.net/.*',
        handler: 'cacheFirst',
        method: 'GET'
      }
    ]

When I force offline I see the images are loaded with SW

[awronski]

@sq-zhou to cache images you have to add StrategOptions that supports cacheableResponse
From documentation:

Because the image responses are cross-domain and don't use CORS, they will be "opaque", and have a status code of 0. When using a cache-first strategy, we need to explicitly opt-in to caching responses with a status of 0.

It is possible like this:

runtimeCaching: [
      {
        urlPattern: 'https://xxx.cloudfront.net/.*',
        handler: 'cacheFirst',
        method: 'GET',
        strategyOptions: {
          cacheName: 'images',
          cacheableResponse: { statuses: [0, 200] }
        }
      }
    ]

To use strategyOptions we need to wait for next release of nuxtjs/pwa.
https://github.com/nuxt-community/pwa-module/pull/36

[bovas85]

I'm using that strategy, but the second time I load the page, images are not serving properly even though I can see them in the serviceWorker cache.

[awronski]

@bovas85 What do you mean 'not serving properly'?

I had the problem with images in Chrome browser. I think the problem is with the maximum cache size.
You should ask about in on WorbkBox.

I don't think it is a problem with nuxt.

[bovas85]

I had to set the cache size, you're right

[awronski]

@bovas85 could you share your code?

[bovas85]

Sure it's here https://github.com/bovas85/nunziellasalluce.com

[pi0]

please note that workbox will not cache opaque responses. So please only use either networkFirst or staleWhileRevalidate strategies. Please see Handle Third Party Requests

[bovas85]

Thanks mate