Service worker is oversizing cache

Question

I have a wired case that I couldn't find an explanation to. using Cache API in the service worker.

When I cache a file from my own origin, the cached size is ok. about 8Kb. When I move the file to CloudFront/S3 the cached size doesn't make sense and inconsistent. between 3Mb to 12MB!!

my service worker fetch function

self.addEventListener('fetch', (event) => {

  if (event.request.url === 'https://MyCloudfront.cloudfront.net/api_uploads/vmRevolution/css/mui.css') {  
  // ---> Cache size will be 3MB -12MB
  // if (event.request.url === 'https://myDomain.example/api_uploads/vmRevolution/css/mui.css') {  
  // ---> cache size will be 8Kb
  // if (event.request.url === 'https://localhost/api_uploads/vmRevolution/css/mui.css') {  
  // ---> cache size will be 8Kb
    showLog('file cache');  
    event.respondWith(  
      caches.match(event.request).then((cachedResponse) => {  
        if (cachedResponse) {  
          return cachedResponse;  
        }  
        return caches.open(RUNTIME).then((cache) => fetch(event.request).then((response) =>  
        
          // Put a copy of the response in the runtime cache.  
          cache.put(event.request, response.clone()).then(() => response)));  
      })  
    );  
  }  
})

Any ideas why?

When I cache all of my assets the size of the cache gets to crazy size of 600MB - 1GB

score 0 · Answer 1 · answered Mar 13 '23 at 22:59

I can't remember the exact reason for this, but it has to do with cross-origin security.

Because your file is hosted on an external domain the file body is 'wrapped' by the browser as a security precaution. Now I cannot quite remember why they do this, but 4 years ago when I hit this, the explanation the MSFT employee shared with me made a lot of sense.

It is the wrapper that causes the bloat. So you may need to make opaque requests or something along those lines.

Or better yet move your site to S3 and host under a single domain :) That is what I do.

Service worker is oversizing cache

1 Answers1