无法从缓存中提供 aws s3 资源 - service worker

Question

我正在尝试使用 service worker 缓存以下 2 个资源

<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>

第一个资源来自aws s3。

Service Worker 注册后，使用 chrome 浏览器检查时，这两个文件都存在于缓存中。

为了检查在注册 service worker 后资源是否在下一个请求中从缓存中提供，我使用以下代码：

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)
            }
        })
    );
});

vue js 资源由 service worker 从缓存中提供。但是，s3 资源再次从 s3 获取。 我还为 s3 存储桶提供了以下 CORS 策略。

<?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

类似于

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)
            }
        })
    );
});

试试这个。