无法从缓存中提供 aws s3 资源 - 服务工作者答案

【问题标题】：Unable to serve aws s3 resources from cache - service worker无法从缓存中提供 aws s3 资源 - 服务工作者
【发布时间】：2018-11-28 00:10:50
【问题描述】：

我正在尝试使用 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。

注册服务工作者后，使用 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>

【问题讨论】：

标签： amazon-web-services amazon-s3 service-worker knox-amazon-s3-client

【解决方案1】：

类似于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)
            }
        })
    );
});

试试这个。

【讨论】：