如何缓存胸围sw工具箱？

我一直在与服务人员和sw-toolbox玩转。两者都是很好的方法，但似乎有其弱点。如何缓存胸围sw工具箱？

我的项目开始使用Google的服务人员方法（link）。我看到这一点的方式是，您必须手动更新缓存清除的版本号。我也可能是错的，但我不认为用户访问过的页面不会被缓存。

相比SW-工具箱方法，我需要补充的是下面的代码：

self.toolbox.router.default = self.toolbox.networkFirst; 

self.toolbox.router.get('/(.*)', function (req, vals, opts) { 
    return self.toolbox.networkFirst(req, vals, opts) 
     .catch(function (error) { 
      if (req.method === 'GET' && req.headers.get('accept').includes('text/html')) { 
       return self.toolbox.cacheOnly(new Request(OFFLINE_URL), vals, opts); 
      } 
      throw error; 
     }); 
});

然后缓存页面的问题将得到解决。这是我的问题：在将sw-toolbox应用到我的项目之后，除非我使用开发工具清除它，否则旧的服务工作人员不会被清除或替换为新的服务工作人员。

任何想法如何解决这个问题？

来源

2017-06-21 oninross

您并不是在寻找[ServiceWorkerRegistration.update（）]（https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerRegistration/update）？ –

但是通过将其包含在文件中，每次都会强制更新SW？ – oninross

@oninross'update'方法只会在服务工作者发生变化（例如，字节不同）时更新。但这并不一定能解决您的问题，因为更新只会安装新的服务人员。它仍然无法激活，直到旧的不再使用，或者你使用类似'skipWaiting'的方法（见下面的答案）。 –

这里是我的问题：应用SW-工具箱到我的项目后，老服务人员没有得到清除或用新的更换，除非我去开发者工具将其清除。

浏览器在每次请求服务工作者作用域中的资源时检查对服务工作器文件的更新。如果服务工作者文件中存在字节差异，则浏览器将安装新的服务工作者。您只需要在开发工具中手动更新服务工作人员，因为该应用程序仍在运行，而浏览器不想在旧服务工作人员仍在使用时激活新的服务工作人员。

如果您关闭与服务人员（如用户会离开你的应用程序时）相关联的所有页面，浏览器就可以激活你的页面打开下一次新的服务人员。

如果要强制新的服务人员接管，可以将self.skipWaiting();添加到install事件中。 Here is some documentation with an example。

你可以学习只是你需要了解从this post by Jake Arichbald服务工人的生命周期中的一切。

至于缓存&缓存管理得好，像SW-工具箱中的工具将处理的缓存清除你。实际上，Workbox是一个新工具，用于替代sw-toolbox的sw-precache。它还将处理高速缓存清除和高速缓存管理（通过比较文件哈希&设置/跟踪资源到期日期）。

一般来说，你应该总是使用一个工具，如Workbox写你的服务人员。用手写字很容易出错，你可能会错过角落案例。

希望有所帮助。

P.S.如果最终没有使用skipWaiting，而只是在页面关闭时更新，&由用户重新打开，您仍然可以启用自动更新以进行开发。在Chrome的开发工具中，应用程序>服务人员有一个更新重新加载选项来自动更新服务工作者。

来源

2017-06-21 17:11:22

当您更改服务工作者，需要清除以前版本的缓存，你应该做的，我不知道是否有sw_toolbox高速缓存禁用内置的。通常，与在激活事件处理程序。

这里的最佳做法是命名包含sw版本号的缓存。下面是一些关于服务人员缓存的在线课程示例代码，可能会帮助您开始：

self.addEventListener("activate", event => { 

console.log("service worker activated"); 

//on activate 
event.waitUntil(caches.keys() 
    .then(function (cacheNames) { 

     cacheNames.forEach(function (value) { 

      if (value.indexOf(config.version) < 0) { 

       caches.delete(value); 

      } 

     }); 

     return; 

    }) 
);

}）;

来源

2017-06-21 12:51:04

如何缓存胸围sw工具箱？

回答

相关问题