前后台分离的WEB应用项目上线时,会因浏览器的自动缓存策略而发生一些错误。比如项目的前后台同时由V1.0升级为了V1.1。此时由于浏览器缓存,用户在打开项目地址时仍然使用了缓存中的V1.0的代码。这便会发生V1.0的前台调用V1.1的后台的BUG。
本文以angular为例,阐述一种前台更新后项目浏览器自动刷新的解决方案。
本文示例代码地址:https://stackblitz.com/edit/angular-2k4qy2
基本思路
想实现前台如果更新后便重新强制浏览器刷新的功能,则需要加入一个版本号来进行控制。在系统启动时读取前台的版本号,然后与服务器上的版本号进行比对。如果版本号相同,则说明浏览器当前加载的前台与服务器提供的前台的版本是统一的,则什么也不做;如果版本号不同,则说明浏览器当前加载的版本与服务器提供的版本不统一,则强制浏览进行刷新以清除缓存带来的影响。
![](https://oss.jqhtml.com/wp-content/uploads/2020/7/NVf6Nn.png)
加入版本号
在项目的src/assets文件夹中新建config.json
,并加入以下信息以记录当前应用的版本号:
{