3

I am using workbox to cache my app shell. The network tab shows that the requests are coming from serviceWorker, and assets are definitely cached as they are retrieved in a snap, even on offline mode:

network tab

However, the cache storage tab is always empty:

Cache storage empty

I have attempted to request the same assets via console:

const request = new Request('https://d198jdpljt0zhj.cloudfront.net/assets/bundles/vendor-0332fe450952d0d66900.js', {mode: 'no-cors'});
fetch(request).then(response => console.log(response));

And voila, asset is shown:

cache added

I'm afraid I'm missing something fundamental.

By the way, cache storage is shown correctly in my local environment, so I suspect this is an issue with assets coming from CDN.

ang3lkar
  • 109
  • 1
  • 8

1 Answers1

7

This is almost certainly because your CDN doesn't support CORS, and only some strategies cache opaque responses by default.

You can override this with

workbox.routing.registerRoute(
  new RegExp('^https://third-party.example.com/assets/'), 
  workbox.strategies.cacheFirst({
    cacheName: 'assets-cache',
    cacheableResponse: {
      statuses: [0, 200], // Make sure 0 is included in this list.
    }
  })
);

There is logging about this in v2 of Workbox, but only if you specifically have it enabled.

In the upcoming v3 release, we're much more aggressive about logging this, as it is a frequent source of frustration.

This draft of a section of the Workbox v3 docs goes into more detail.

Jeff Posnick
  • 53,580
  • 14
  • 141
  • 167
  • Hi Jeff, mystery (partly) solved. I had a piece of code that was deleting the cache on the activation event of the service worker, which explains the empty cache tab and the re-appearance on the fetch event. By removing that code, it works as expected. What still puzzles me though is that assets were available on offline mode. – ang3lkar Nov 29 '17 at 21:55
  • I am marking the response as accepted as I had several opaque responses which were made visible. Definitely a good decision to log them more aggressively on v3. – ang3lkar Nov 29 '17 at 22:05