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

Question

我正在使用服务工作者，以允许离线访问我的页面。 我正在使用工作箱，但我认为该问题通常适用于服务人员。

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

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

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），则会得到此提示控制台错误：

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

并显示错误页面。

在“ 仅在Chrome（Service Worker）”中有一个建议：'...对于重定向模式不是“跟随”的请求，使用了重定向的响应'当您获得重定向的响应时，存储响应的副本，所以我尝试使用此技术作为工作箱插件（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;
    },
}

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

内容类型image / png上次修改时间Tue，18 Jun 2019 12:57:10 GMT

它严重错过了Content-Disposition：附件标头，浏览器将此标头视为下载文件时必须使用该标头。

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

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

看来工作正常。 但是，如果有一个更干净的答案，我会很乐意放弃这个选择。