我一直在玩弄服务人员和 sw-toolbox。两者都是很好的方法,但似乎都有其弱点。
我的项目开始时使用 Google 的 Service Worker 方法(link)。我的看法是,您必须手动更新缓存清除的版本号。我也可能是错的,但我不认为用户访问过的页面不会被缓存。
与sw-toolbox方法相比,我需要添加的只是以下代码:
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 应用到我的项目后,旧的 Service Worker 不会被清除或被新的 Service Worker 替换,除非我转到开发工具来清除它。
有什么想法可以解决这个问题吗?
这是我的问题:将 sw-toolbox 应用到我的项目后,旧的
服务人员不会被清除或被新的人员取代,除非我
去开发工具清除它。
每次请求 Service Worker 范围内的资源时,浏览器都会检查 Service Worker 文件的更新。如果 Service Worker 文件中存在字节差异,浏览器将安装新的 Service Worker。您只需要在开发工具中手动更新 Service Worker,因为应用程序仍在运行,并且浏览器不希望在旧 Service Worker 仍在使用时激活新 Service Worker。
如果您关闭与 Service Worker 关联的所有页面(就像用户离开应用程序时所做的那样),浏览器将能够在下次打开页面时激活新的 Service Worker。
如果你想强制新的 Service Worker 接管,你可以添加self.skipWaiting();
to the install
event. 这是一些带有示例的文档.
您可以从中了解有关 Service Worker 生命周期的所有信息杰克·阿奇博尔德的这篇文章.
就缓存和缓存管理而言,像 sw-toolbox 这样的工具将为您处理缓存清除。事实上,Workbox是一个新工具,旨在取代 sw-toolbox 和 sw-precache。它还将处理缓存清除和缓存管理(通过比较文件哈希和设置/跟踪资源到期日期)。
一般来说,您应该始终使用类似的工具Workbox编写您的服务人员。手工编写它们很容易出错,并且您可能会错过极端情况。
希望有帮助。
附:如果你最终没有使用skipWaiting
并且仅在用户关闭并重新打开页面时更新,您仍然可以启用自动更新以进行开发。在 Chrome 的开发工具中,应用 > Service Worker has an 重新加载时更新自动更新 Service Worker 的选项。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)