当前位置: 首页 > Web前端 > HTML

前端重新部署如何通知用户刷新网页?

时间:2023-03-28 01:21:00 HTML

1。目标场景有时上线,用户还停留在老页面。用户不知道网页已重新部署。小于新功能。2.思考解决方案如何解决这个问题就是思考...如果后端可以配合我们,我们可以使用webSocket与后端进行实时通信。前端部署好后,后端会发送一个通知,前端会检测到Message进行提示,也可以优化使用EvnentSource,它和socket很像,只是它只能从后端推送消息到前端,而前端是无法向后端发送消息的,我们也不需要向后端发送消息。以上方案需要后台配合,但是公司后台比较忙,需要纯前端实现。重新思考...根据与朋友的讨论,我想出了一个计划。在项目根目录下给一个json文件,写一个固定的key值,打包的时候改,然后在代码里poll判断有没有,如果没有改,请提示。康先生果然不识经。但是写完之后发现太麻烦了。我需要手动配置json文件,打包的时候需要修改。有没有更简单的解决方案?让我们进行第二轮讨论。第二轮讨论的方案是根据打包后生成的脚本src的hash值来判断。每个包装都会产生一个唯一的哈希值。只要轮询不同,就必须重新部署。3.代码实现接口Options{timer?:number}exportclassUpdater{oldScript:string[]//存储第一个值,即脚本的hash信息newScript:string[]//获取新值,即新脚本的hashInformationdispatch:Record//小发布订阅通知用户更新构造函数(options:Options){this.oldScript=[];this.newScript=[]this.dispatch={}this.init()//初始化this.timing(options?.timer)//poll}asyncinit(){consthtml:string=awaitthis.getHtml()this.oldScript=this.parserScript(html)}asyncgetHtml(){consthtml=awaitfetch('/').then(res=>res.text());//读取索引htmlreturnhtml}parserScript(html:string){constreg=newRegExp(/]*)?>(.*?)<\/script\s*>/ig)//脚本正则返回html.match(reg)asstring[]//匹配脚本标签}//发布订阅通知on(key:'no-update'|'update',fn:Function){(this.dispatch[key]||(this.dispatch[键]=[])).推(fn)returnthis;}compare(oldArr:string[],newArr:string[]){constbase=oldArr.lengthconstarr=Array.from(newSet(oldArr.concat(newArr)))//如果新旧长度相同,无Updateif(arr.length===base){this.dispatch['no-update'].forEach(fn=>{fn()})}else{//否则通知updatethis。dispatch['update'].forEach(fn=>{fn()})}}timing(time=10000){//轮询setInterval(async()=>{constnewHtml=awaitthis.getHtml()this.newScript=this.parserScript(newHtml)this.compare(this.oldScript,this.newScript)},time)}}复制代码代码用法//实例化这个类constup=newUpdater({timer:2000})//通知起来.on('no-update',()=>{console.log('notupdated')})//更新通知up.on('update',()=>{console.log('updated')})复制代码4.测试执行npmrunbuild打包安装http-server使用http-server开一个服务重新打包npmrunbuild这样可以检测是否有重新发布和通知用户of更新