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();//启动全屏loadinglocation.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);可以自行封装一下。这两个最终效果都是用户在切换页面的时候，会发起一个请求，然后判断是否有更新，有更新就会刷新。勉强解决了这个问题，期待有更好的方案。