Question

我偶然发现了一个我正在苦苦挣扎了两天的问题，我无法使其正常工作。

我正在尝试使用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调用时，它不会使用缓存的响应，而是发出新的请求。在离线模式下，这会导致错误。

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

我在做什么错了？

Workbox预缓存将项目放入-temp缓存中，以后不再使用

0 个答案: