When caching files via service worker the cache gets very bloated, is service worker caching hidden files?

Question

I have a service worker following this method here, outlined by Nicolas Bevacqua. The code works for me after some small tweaks. But when navigating around for a while the cache gets some serious bloat. I've added some exclusions i.e.

if (( event.request.url.indexOf( '/maps/' ) !== -1 ) || 
    ( event.request.url.indexOf( '/mapfiles/' ) !== -1 ) || 
    ( event.request.url.indexOf( '/maps-api-v3/' ) !== -1 ) || 
    ( event.request.url.indexOf( '/images/' ) !== -1 ) || 
    ( event.request.url.indexOf( '.mp4' ) !== -1 ) ) {
    return false;
} 

But what is strange is the cache total size is not reflective of what's in the actual caches. There seems to be data in there that is not listed in my two caches. Is there a way to stop this from happening? And is the service worker caching hidden files?

Answer 1

1. You should be a bit more specific – "some serious bloat" is not too descriptive here =)
2. Total cache size being not reflective of the actual files when inspected on disk usually means that you're caching opaque responses. When an opaque response is cached, the caches API hides the actual size of the response by saying it takes a lot of space. So eg. 7 Kb file might become 7 Mb in the SW cache. Read more here: https://cloudfour.com/thinks/when-7-kb-equals-7-mb/
3. I'm not sure what you mean by "data in there that is not listed in my two caches". You need to provide examples of your code and screenshots from the DevTools and be more specific =)
4. No, Service Worker is not caching anything by default. I'm not sure what you mean by "hidden files" but still no, Service Worker is not caching anything that you didn't ask it to cache. If you ask it to cache these "hidden files" then it will cache them. But there's no automatic mechanism to do so without your knowledge.

Hope this helps! Feel free to ask more or update your question!