Unable to serve aws s3 resources from cache - service worker

Question

I'm trying to cache the following 2 resources using a service worker

<link href="https://s3.xxxxx.amazonaws.com/xxbucketxx/example.css" rel="stylesheet" crossorigin="anonymous">
<script src="https://unpkg.com/vue/dist/vue.min.js" crossorigin="anonymous"></script>

The first resource is from aws s3.

After the service worker is registered, both the files are present in cache storage when inspected using chrome browser.

To check, if the resources are served from cache in next request after the service worker is registered, I'm using following code:

self.addEventListener("fetch", function(event) {
    event.respondWith(
        caches.match(event.request).then(function(response) {
            if(response != undefined){
                return response
            }
            else{
                console.log("Fetching outside cache", event.request.url)
                if(event.request.url.includes("?cache=true")){
                    caches.open("my-cache").then(function(cache){
                        cache.add(event.request.url);
                    })
                }
                return fetch(event.request)
            }
        })
    );
});

The vue js resource is served from cache by service worker. But, the s3 resource is fetched again from s3. I have also given the following CORS policy for s3 bucket.

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>

Answer 1

Similar to Service worker doesn't return file from cache

self.addEventListener("fetch", function(event) {
    event.respondWith(
        caches.match(event.request,{cacheName:"my-cache",ignoreVary:true}).then(function(response) {
            if(response != undefined){
                return response
            }
            else{
                console.log("Fetching outside cache", event.request.url)
                if(event.request.url.includes("?cache=true")){
                    caches.open("my-cache").then(function(cache){
                        cache.add(event.request.url);
                    })
                }
                return fetch(event.request)
            }
        })
    );
});

Try this.