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

Question

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

用户的工作流程是他点击一个按钮下载数据以供离线使用。这包括许多文件，它们可能存储在也可能不存储在 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)，我在控制台中收到此错误:

... a redirected response was used for a request whose redirect mode is not "follow"

并显示一个错误页面。

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

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

content-type image/png last-modified Tue, 18 Jun 2019 12:57:10 GMT

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

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

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 .

它看起来工作正常。但是，如果有更清晰的答案，我会很乐意放弃对它的复选标记。