9

我是服务人员的新手，我正在使用 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 开发工具来检查 sw 状态和创建的缓存。对数据 URL 的网络调用如下：

第一次加载页面：
在此处输入图像描述 第二次加载页面：
在此处输入图像描述

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

提前感谢
丹

4

1 回答 1

4

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

在进行 API 调用之前，您还需要等待页面中的 serviceWorker.ready。这样你就知道 service worker 是活跃的。

这些变化一起，在您的服务工作者中，您将拥有：

 ...
 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
      });
}
于 2017-08-29T22:45:13.773 回答