1

我偶然发现了一个我正在努力解决两天的问题，但我无法让它工作。

我正在尝试使用 Google Workbox 插件为服务人员预缓存一些 api 调用。

我的代码如下所示：

workbox.skipWaiting();
workbox.clientsClaim();

const precacheController = new workbox.precaching.PrecacheController();

self.addEventListener("install", event => {
  const assetsLoaded = fetch("http://localhost:8000/pages")
    .then(response => response.json())
    .then(response => {
      let pagesList = response.map(
        page =>
          `http://localhost:8000/pages?slug=${page.slug}`
      );
      pagesList.push("http://localhost:8000/frontpage");
      precacheController.addToCacheList(pagesList);
    })
    .then(() => {
      precacheController.install();
    });
  event.waitUntil(assetsLoaded);
});

self.__precacheManifest = [].concat(self.__precacheManifest || []);
workbox.precaching.suppressWarnings();
workbox.precaching.precacheAndRoute(self.__precacheManifest, {});

它基于此线程中显示的代码：Service worker add files from API call to precache

我可以在检查器中看到这些请求正在触发并存储在workbox-precache-http://localhost:3001/-temp缓存中。但与此缓存平行，我看到workbox-precache-http://localhost:3001/创建了缓存，它是空的。

此外，workbox-precache-http://localhost:3001/-temp我可以看到每个缓存的响应都有Content-Length: 0. 我不知道为什么，但这可能是一个线索。虽然当我查看给定的响应时，我可以在检查器中看到它的全部内容......

当我尝试进行一些应该预先缓存的 api 调用时，它不会使用缓存的响应，而是发出新的请求。在离线模式下，这会导致错误。

我的目标是将这些请求存储在缓存中，以便用户可以离线浏览整个页面。

我究竟做错了什么？

4

0 回答 0