Workbox-仅在第二页刷新时创建的运行时缓存

Question

我是服务人员的新手，正在使用Workbox预先缓存我的应用程序外壳并缓存我的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 Dev工具检查软件状态和创建的缓存。数据URL的网络调用如下：

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

对于我做错了什么或如何调试它的任何建议，我将不胜感激。

在此先感谢
Dan

Answer 1

To be safe, you might want to add skipWaitingto the Workbox constructor to ensure the service worker doesn't wait for the page to reload to start caching.

You would also want to wait on serviceWorker.ready in your page before making the API call. This way you know the service worker is active.

These changes together, in your service worker you would have:

 ...
 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);

Then in your web page

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