故事
我有一个使用传统浏览器缓存的网站,该网站有大量缓存,静态内容长达 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);
和软件集成之前一样,同样的行为仍然存在。然而升级却像往常一样缓慢......
<小时/>问题
我想知道是否有更好的方法?它可以执行如下所示的操作,并且仍然保留重型缓存机制(对于旧浏览器):
- 发现新版本
- 仍然使用最新版本的旧内容,
- 正在获取新版本的所有新内容,
- 下次用户访问该网站时,他们将使用最新版本。
注意目标是在部署新版本时更快地加载网站
最佳答案
那就是 exactly how service workers' life cycle work 。让我们看一下慢动作:
首先,您需要对服务工作线程进行字节级更改以强制其更新:您可以包含应用程序的版本并将其存储在变量中 var version = "1.0.0"
.
现在浏览器会发现有一个新的 Service Worker,它将触发其 install
事件。在该处理程序中,打开新缓存(以您的站点版本命名。例如:"cache-v"+ version
)并获取所有新资源。
直到前一个 Service Worker 控制的最后一个选项卡关闭后,新的 Service Worker 才会被激活。关闭所有选项卡并重新打开应用程序后,新 Service Worker 将收到 activate
事件。在此处理程序中,您可以删除过时的缓存。
现在您的 Service Worker 已准备好从新缓存中获取数据。
这里的要点是:
- 使用名称源自应用版本的缓存。
- 在安装过程中不要使用
self.skipWaiting()
。这样您就可以确保已安装的 Service Worker 继续提供当前内容。 - 更新 Service Worker 中的版本以调用更新机制。
关于javascript - 在大量缓存站点上使用查询字符串版本标识符的 Service Worker 的最佳方法,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37478678/