0

There seems to be a ginormous discrepancy between what I think is being cached, and how much data the chrome dev tools are telling me I have cached.

I tried using workbox to cache images from firebase storage, as well as the vanilla service worker code using the cache API and intercepting fetch requests. However, I always end up with something like this https://i.stack.imgur.com/4S9XQ.jpg, no matter what I do. My service worker code is pretty much taken off the workbox docs for the caching (although the results are the same with vanilla JS).

workbox.routing.registerRoute(
/.*firebasestorage.googleapis.com.*\/chaptail.appspot.com.*\/Users.*media&token/,
  new workbox.strategies.CacheFirst({
    cacheName: 'image-cache',
    plugins: [
      new workbox.expiration.Plugin({
        maxEntries: 300,
        maxAgeSeconds: 365* 24 * 60 * 60,
      })
    ],
  })
);

I'm honestly starting to feel like the Chrome dev tools are wrong, although that seems quite unlikely. However, I really can't wrap my head around the fact that it's showing 100MB of data stored when in reality it looks like it's less than 100KB. Am I doing something terribly wrong, or is Chrome dev tools messing with me?

Michaël Bradet-Legris
  • 11
  • 2
  • 5

1 Answers1

1

This is by design.

When you're caching assets from other domains, the SW handles them as opaque responses. Opaque responses limit certain info from the responses and hide the actual size by faking it to ~7 megs or so.

Check this out What limitations apply to opaque responses?

pate
  • 4,937
  • 1
  • 19
  • 25