工作箱 - 仅在第二页刷新

Question

我是服务工作者的新手，我正在使用Workbox预先缓存我的app shell并缓存我的api数据。

资源的预缓存工作正常，缓存被创建并填充。

运行时缓存不会创建缓存并填充它，直到我第二次重新加载页面。

我认为这可能是一个计时问题，所以我在javascript中设置了一个页面重新加载的数据，但这仍然没有缓存调用。

我没有做任何具体的创建缓存，应用代码是：

...
app.getData = function() {
  var requestHeaders = new Headers({
    Accept: "application/json"
  });
  fetch(app.dataUrl, { headers: requestHeaders })
  .then(function(response) {
    return response.json();
  })
  .then(function(json) {
      app.updateCards(json);
  })
  .catch(function(error) {
      console.log('There has been a problem with your fetch operation: ' + error.message);
  });
}
...
if ('serviceWorker' in navigator) {
navigator.serviceWorker
         .register('/my_sw.js')
         .then(function() {
            console.log('Service Worker Registered');
         });
}

app.getData();  # fetch api data

然后在服务工作者中：

 ...
 const workboxSW = new self.WorkboxSW({clientsClaim: true});
 // register data url to cache
 workboxSW.router.registerRoute(
    '/my_api/data',
     workboxSW.strategies.staleWhileRevalidate()
 );
 // pre-cache assets
 workboxSW.precache(fileManifest);

我正在使用Chrome开发工具检查sw状态和创建的缓存。网络对数据URL的调用如下：

第一页加载：
第二次加载页面：

对于我做错了什么，或者如何调试它，我会感激不尽。

提前致谢
丹

Answer 1

为安全起见，您可能希望将skipWaiting添加到Workbox构造函数中，以确保服务工作者不会等待页面重新加载以开始缓存。

您还需要在进行API调用之前等待页面中的serviceWorker.ready。这样您就知道服务工作者是活动的。

这些变化将在您的服务工作者中共同进行：

 ...
 const workboxSW = new self.WorkboxSW({skipWaiting: true, clientsClaim: true});
 // register data url to cache
 workboxSW.router.registerRoute(
    '/my_api/data',
     workboxSW.strategies.staleWhileRevalidate()
 );
 // pre-cache assets
 workboxSW.precache(fileManifest);

然后在您的网页

...
if ('serviceWorker' in navigator) {
    navigator.serviceWorker
      .register('/my_sw.js')
      .then(function() {
        return navigator.serviceWorker.ready;
      })
      .then(function() {
        app.getData();  # fetch api data
      });
}