I have a PWA app up and working, couple of days ago I started to add ServiceWorker.js file to my project in order to have an cache strategy up and working in my app. I'm using React and I use serviceworker-webpack-plugin in order to register my service worker.
As you might know serviceworker-webpack-plugin would give us a serviceWorkerOption global object in out sw.js file that includes all of our assets under serviceWorkerOption.assets key. so, I implemented cache flow in my Service worker file like below:
in install event I cache all my assets from serviceWorkerOption.assets:
caches.open(STATIC_CACHE_VERSION)
.then(cache => {
return cache.addAll(STATIC_CACHEABLE_ASSETS)
})
.catch( e => {
console.log('[ sw ] cache cannot open cache', e)
})
in fetch event I use cache first , fallback to fetch strategy and every thing looks fine so far.
Problem
the problem raises in Chrome, where my cache storage is bumping up to 500mb, check image below:
as I use cache first, fallback to fetch it just added any new fetched image or asset to my DYNAMIC_CACHEABLE_ASSETS but as I see all of my assets in my public folder is around 4Mb and I don't think that would cause us any issue in cache side, with that considering what could be the problem? what can cause that amount of cache storage size?
Also I should note that this cache storage size is around 20Mb in normal Android device and that would be a mess to have around 500Mb cache size.
