我有一个使用传统浏览器缓存的网站,该网站缓存过多,静态内容长达365天。
为了在部署新版本后清除缓存,我使用了版本标识符的查询字符串,例如:
<script src="js/main.js?version=1.3.0"></script>
但是对于每个版本的升级,加载时间都很糟糕,因为当查询字符串更改时,浏览器需要下载所有新内容。
现在,我们有了Service Worker,我已经将其集成到我的网站中。到目前为止一切都可以,版本标识符的查询字符串仍然得到使用。
// simply cache all the static contents
global.toolbox.router.get('/', global.toolbox.networkFirst);
global.toolbox.router.get(/(.js|.css|.png|.jpg|.json|.html)/, global.toolbox.fastest);
而且仍然存在与SW集成之前相同的行为。但是升级总是像往常一样缓慢...
我想知道是否有更好的方法?可以执行以下操作,并且仍然保持高速缓存机制(对于旧的浏览器):
注意目标是在部署新版本时更快地加载站点
这正是服务人员生命周期的工作方式。让我们来看看它的慢动作:
首先,您需要对服务工作程序进行字节级更改以强制对其进行更新:您可以包括应用程序的版本并将其存储在变量中var version = "1.0.0"
。
现在,浏览器将发现有一个新的服务工作者,它将触发其install
事件。在该处理程序中,打开新的缓存(以网站版本命名。例如:),"cache-v" + version
然后获取所有新资源。
在关闭由前服务工作人员控制的最后一个选项卡之前,新服务工作人员不会被激活。关闭所有选项卡并重新打开应用程序后,新的服务工作者将收到activate
事件。在此处理程序中,您可以删除过时的缓存。
现在,您的服务工作者已准备好从新缓存中获取数据。
这里的关键点是:
self.skipWaiting()
在安装过程中不使用。这样,您可以确保已经安装的服务工作者继续提供当前内容。本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句