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），我在控制台中收到此错误：

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

并显示错误页面。

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日格林尼治标准时间

严重错过了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'));
        });
    });
}

该文件的下载文件位于哪里：https://www.npmjs.com/package/downloadjs。

似乎正常。但是，如果有一个更干净的答案，我会很乐意放弃对勾。

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

1 个答案: