在 Service Worker 中缓存 Amazon S3 文件以供离线使用答案

【问题标题】：Cache Amazon S3 files in Service Worker for Offline usage在 Service Worker 中缓存 Amazon S3 文件以供离线使用
【发布时间】：2019-06-28 09:58:26
【问题描述】：

我正在使用服务人员来允许离线访问我的页面。我正在使用工作箱，但我认为这个问题一般适用于服务人员。

用户的工作流程是点击按钮下载数据以供离线使用。这包括许多文件，这些文件可能会或可能不会存储在 Amazon S3 上。

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

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

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

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

负责拦截 fetch 并将它们存储在缓存中。这当然是简化的。

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

...重定向响应用于重定向模式的请求不是“关注”

并显示错误页面。

Only in Chrome (Service Worker): '... a redirected response was used for a request whose redirect mode is not "follow" ' 建议在收到重定向响应时存储响应的副本，因此我尝试将此技术用作工作箱插件（cleanResponse 与链接帖子中的内容相同）：

{
    cacheWillUpdate: async ({request, response, event}) => {
        if (response.redirected && response.ok) {
            // Sanitize redirects
            for (const key of response.headers.keys()) {
                console.log(key, response.headers.get(key));
            }
            return cleanResponse(response);
        }
        return response;
    },
}

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

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

严重遗漏了 Content-Disposition: 附件标头，这是浏览器将其视为下载所必需的。

有什么办法可以解决这个问题，还是我遇到了一些安全限制？

【问题讨论】：

标签： javascript service-worker workbox

【解决方案1】：

我为我的情况想出了一个解决方法。也许将来会对其他人有所帮助。

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

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

downloadFile 是这个包的位置：https://www.npmjs.com/package/downloadjs.

它似乎工作正常。但是，如果有一个更清晰的答案，我很乐意放弃对它的复选标记。

【讨论】：