javascript - 第一次加载后,Service Worker 缓存会破坏 PDF
问题描述
我正在使用sw-toolbox在我的一个客户网站上启用缓存。它通常运行良好,但由于某种原因它在第一次加载后破坏了 PDF。我怀疑当它将 PDF 保存到缓存中时,它们会以某种方式损坏,但我仍然可以从损坏的页面中将 PDF 保存在本地,并且它会正常打开。
这是我的服务人员:
((global) => {
// disable the service worker for post previews
global.addEventListener("fetch", (event) => {
if (event.request.url.match(/preview=true/)) {
return;
}
});
// ensure the service worker takes over as soon as possible
global.addEventListener("install", event => event.waitUntil(global.skipWaiting()));
global.addEventListener("activate", event => event.waitUntil(global.clients.claim()));
// set up the cache
global.toolbox.precache(["/", "/offline/"]);
global.toolbox.router.get("/wp-content/uploads/(.*)", toolbox.cacheFirst);
global.toolbox.router.get("/(.*)", toolbox.networkFirst, { NetworkTimeoutSeconds: 5 });
// redirect offline queries to offline page
self.toolbox.router.get("/(.*)", function (req, vals, opts) {
return toolbox.networkFirst(req, vals, opts).catch((error) => {
if (req.method === "GET" && req.headers.get("accept").includes("text/html")) {
return toolbox.cacheOnly(new Request("/offline/"), vals, opts);
}
throw error;
});
});
})(self);
我尝试过的一些事情:
- 添加额外的路线
global.toolbox.router.get("/wp-content/uploads/(.*).pdf", toolbox.networkOnly);
更改
/wp-content/uploads/(.*)
路由以重定向到标题为“no-cache”的 PDF URLglobal.toolbox.router.get("/wp-content/uploads/(.*)", function (req, vals, opts) { if (req.url.match(/\.pdf$/)) { const pdf_headers = new Headers(); pdf_headers.append("Content-Type", "application/pdf"); return toolbox.networkOnly(new Request(req.url, { method: "GET", headers: pdf_headers, mode: "same-origin", cache: "no-cache", }), vals, opts); } else { return toolbox.cacheFirst; } });
以与排除相同的方式排除 PDF
preview=true
:global.addEventListener("fetch", (event) => { if (event.request.url.match(/preview=true/) || event.request.url.match(/\.pdf$/)) { return; } });
我没有想法,希望得到一些指导。此处提供测试页面:https ://www.westmontparks.org/about-us/board-minutesbid-docs/
解决方案
这可能与影响 Chrome 版本 71的这个 chrome 错误有关。
推荐阅读
- shell - Solaris 11 中不使用 SVR4 的 makepkg 命令的替代方法
- python - 运算符 pow() 返回与 ** 不同的值
- python - 使用 SMTLIB2 查找 z3 中的最大数字
- java - 为什么输出是“false10”而不是“false11”?
- android - 如何从 Android 版本中删除蓝牙?
- c# - 重新启动 Main() 的 C# 方法
- javascript - 如何将函数的“this”绑定到类(React 组件)
- node.js - 尝试创建新用户
- entity-framework - 实体框架数据库未更新,无错误
- c++ - 覆盖一个方法会生成一个错误,说明它没有被覆盖,即使签名和参数都是一样的