javascript - 第一次加载后，Service Worker 缓存会破坏 PDF

Question

我正在使用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/(.*) 路由以重定向到 header 为“no-cache”的 PDF URL

  global.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/

Answer 1

这可能与 this chrome bug 有关这会影响 Chrome 版本 71。