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

Question

我是服务人员的新手，并且正在使用Workbox来预缓存我的应用程序 shell 并缓存我的api数据。

Assets 的预缓存工作正常，正在创建和填充缓存。

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

我认为这可能是时间问题，因此我在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次加载:

页面第二次加载:


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

提前致谢
担

Answer 1

为了安全起见，您可能需要将skipWaiting添加到Workbox构造函数中，以确保服务 worker 无需等待页面重新加载就可以开始缓存。

您还希望在页面中等待serviceWorker.ready之后再进行API调用。这样，您就知道服务人员处于事件状态。

这些变化加在一起，在您的服务人员中，您将拥有:

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