Javascript 在Service Worker中缓存Amazon S3文件以供脱机使用

我正在使用服务人员允许脱机访问我的页面。我使用的是workbox，但我认为这个问题适用于一般的服务人员

用户的工作流程是单击按钮下载数据以供脱机使用。这包括许多文件，这些文件可能存储在AmazonS3上，也可能不存储在AmazonS3上

例如，可以想象，当用户单击按钮时，代码是：

function cacheFilesForOfflineUse(files) {
    files.forEach(file => fetch(file));
}

然后，在serviceWorker.js中，类似于：

workbox.routing.registerRoute(
    ({event}) => /* ... omitted ... */,
    new workbox.strategies.CacheFirst({cacheName: 'myFilesCache'})
);

负责截取并将其存储在缓存中。这当然是简化了的

这主要是有效的，但对于一种特定情况：如果文件位于302重定向之后（即文件存储在S3上时的情况），并且我尝试下载该文件（通过设置document.location），我会在控制台中收到以下错误：

。。。重定向响应用于重定向模式为的请求 不是“跟随”

并显示一个错误页面

中有一条建议，当您收到重定向的响应时，应存储响应的副本，因此我尝试使用此技术作为workbox插件（cleanResponse如链接帖子中所示）：

它几乎可以工作，但有一个大警告：它不会克隆所有响应头。唯一记录/复制的标题为：

内容类型图像/png 最后修改日期：2019年6月18日星期二12:57:10 GMT

它严重遗漏了内容配置：附件标题，浏览器将其视为下载所需

---

有没有办法解决这个问题，或者我遇到了一些安全限制？

我为我的案例找到了一个解决办法。也许将来它会对其他人有所帮助

解决方案是避免使用导航下载文件。所以我替换了：

function downloadFile(fileUrl) {
    document.location.assign(fileUrl);
}

与

此包的下载文件位置：

它似乎工作正常。但是如果有一个更清晰的答案，我会很高兴地给它打勾

function downloadFile(fileUrl) {
    document.location.assign(fileUrl);
}

function downloadFile(fileUrl, filename) {
    fetch(url).then(function (response) {
        response.blob().then(function (blob) {
            downloadFile(blob, filename, response.headers.get('content-type'));
        });
    });
}