CODEWITHSUNDEEP
javascriptcachingservice-workerprogressive-web-apps
InternetJohnny
InternetJohnny

Reputation: 51

Why is my service worker storing so much cache?

My entire website is ~3MB (images included), however when I check the cache used for the website on chrome mobile, it shows ~50MB are being used. I have cleared it and reset the site settings, but it still happens.

I have implemented a service worker following Mozilla's guidelines for the cache and update recipe, and edited it a little.
Basically what I (think I) am doing is:

  1. install service worker
  2. it caches the CACHED_URLS
  3. When there is a request, it checks if the assets needed are cached:
    • if yes, it serves them from cache
    • if not, it serves them from the network
  4. It updates the cache with network data (I know, it should not be doing this if it already served from the network in step 3.2)

Here's the code: 

importScripts('/pwa/cache-polyfill.js');

var CACHE = 'my-cache';
var CACHED_URLS = [
    '/',
    '/index.html',
    '/index.html?homescreen=1',
    '/?homescreen=1',
    '/styles/index.min.css',
    '/font/fa.css',
    '/img/favicon.png'
];


self.addEventListener('install', function(event) {
    event.waitUntil(
        caches.open(CACHE).then(function(cache) {
            return cache.addAll(CACHED_URLS);
        })
    );
});

// Mozilla - Cache and Update
self.addEventListener('fetch', function(evt) {
    console.log('The service worker is serving the asset.');

    // Cache or Fetch
    evt.respondWith(cacheOrFetch(evt.request));

    // Update Cache
    evt.waitUntil(update(evt.request));
});

function cacheOrFetch(request) {
    return caches.match(request).then(function(response) {
        return response || fetch(request);
    })
}

function update(request) {
    return caches.open(CACHE).then(function(cache) {
        return fetch(request).then(function(response) {
            return cache.put(request, response);
        });
    });
}

So my question is: Why is it storing 40-50MB in cache if the entire website is 3MB total?
Do I have to flush old cache?

Upvotes: 1

Views: 1442

Answers (2)

jrnv
jrnv

Reputation: 73

You precache some files at install, but after that you cache all requests. (in an inefficiënt way, but thats off topic)

Keep in mind each Unique URL is a different cahce entry. So if you have a dynamic query string, your cache could really blow up to the max of 50MB.

Upvotes: 0

Rachit Sharma
Rachit Sharma

Reputation: 43

I also had this cache storage size issue, in my case i was caching opaque redirects request for offline capability.

You can check if there is any redirects of request from server side or any request serves with status code 3xx, these are the opaque responses/Opaque-redirects which will take too much size in cache.

Open Developer Tool in Chrome: Go to Application Tab->Go To Cache Storage-> Check your cache bucket, check the Response Type probably there will any Opaque Redirect cached response is available.

You can check below link for more detail: service worker gotchas

Upvotes: 1

Related Questions