SPA、单页面应用重新部署后，正在浏览的页面如何更新缓存？

Question

因为更新频繁，且在使用高峰期更新发布，如果正在使用应用的用户并没有刷新页面，访问的都是缓存的旧页面，请问如何解决这个问题？

Answer 1

这个问题我也思考了很久，目前没有找到比较完美的解决方案。事实上我们要把当前运行的代码更新到最新的，只能先更新index.html，而更新index.html目前我发现只能是刷新页面了。
目前临时解决方案有两个：
通过后端接口返回版本号判断是否有更新，有更新，就把页面刷新一下。这个事情可以放到切换路由的时候做，比如beforeEach。
在编译的时候自己生成一个js文件，然后前端用jsonp去请求这个js，判断是否有更新。有更新，就把页面刷新一下。这个事情可以放到切换路由的时候做，比如beforeEach。具体步骤如下：
在编译时候生成一个包含版本信息的version.js文件到dist目录,比如在webpack.prod.conf.js中：
varversion=newDate().getTime()
varcontent="getVersion('"+version+"')"
//console.log('开始创建版本文件...')
fs.writeFile(config.build.assetsRoot+"/version.js",content,function(err){
if(err){
returnconsole.log(err);
}
//console.log("Thefilewassaved!");
});
在路由文件中设置回调：
//获取版本更新的jsonp回调函数
window.getVersion=version=>{
if((localStorage.frontendVersion&&version!==localStorage.frontendVersion)||(window.frontendVersion&&version!==window.frontendVersion)){
Loading.service();//启动全屏loading
location.reload();//刷新页面
}
localStorage.frontendVersion=version;//保存以便下次使用判断
window.frontendVersion=version;//保存以便下次使用判断
}
在router.beforeEach或router.afterEach发起jsonp：
varversionScript=document.createElement("script");
versionScript.src=location.origin+'/version.js?v='+newDate().getTime();
vars=document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(versionScript,s);
可以自行封装一下。这两个最终效果都是用户在切换页面的时候，会发起一个请求，然后判断是否有更新，有更新就会刷新。
勉强解决了这个问题，期待有更好的方案。