無法從緩存中提供 aws s3 資源 - 服務工作者

Question

我正在嘗試使用服務工作者緩存以下 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 瀏覽器檢查時，這兩個文件都存在於緩存存儲中。

要檢查資源是否在服務工作者注冊后的下一個請求中從緩存中提供，我使用以下代碼：

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

類似於Service Worker 不從緩存中返回文件

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

嘗試這個。