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更新
