快捷導(dǎo)航

JS前端重新部署通知用戶(hù)刷新網(wǎng)頁(yè)

更新時(shí)間：2023年01月15日 09:26:46 作者：小滿(mǎn)zs

這篇文章主要為大家介紹了JS前端重新部署通知用戶(hù)刷新網(wǎng)頁(yè)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

1.目標(biāo)場(chǎng)景

有時(shí)候上完線(xiàn)，用戶(hù)還停留在老的頁(yè)面，用戶(hù)不知道網(wǎng)頁(yè)重新部署了，跳轉(zhuǎn)頁(yè)面的時(shí)候有時(shí)候js連接hash變了導(dǎo)致報(bào)錯(cuò)跳不過(guò)去，并且用戶(hù)體驗(yàn)不到新功能。

2.思考解決方案

如何去解決這個(gè)問(wèn)題思考中...

如果后端可以配合我們的話(huà)我們可以使用webSocket 跟后端進(jìn)行實(shí)時(shí)通訊，前端部署完之后,后端給個(gè)通知，前端檢測(cè)到Message進(jìn)行提示，還可以在優(yōu)化一下使用EvnentSource 這個(gè)跟socket很像只不過(guò)他只能后端往前端推送消息，前端無(wú)法給后端發(fā)送，我們也不需要給后端發(fā)送。

以上方案需要后端配合，奈何公司后端都在忙，需要純前端實(shí)現(xiàn)。

重新進(jìn)行思考...

根據(jù)和小伙伴的討論得出了一個(gè)方案，在項(xiàng)目根目錄給個(gè)json 文件，寫(xiě)入一個(gè)固定的key值然后打包的時(shí)候變一下，然后代碼中輪詢(xún)去判斷看有沒(méi)有變化，有就提示。

果然是康老師經(jīng)典不知道。

但是寫(xiě)完之后發(fā)現(xiàn)太麻煩了，需要手動(dòng)配置json文件，還需要打包的時(shí)候修改，有沒(méi)有更簡(jiǎn)單的方案，進(jìn)行第二輪討論。

第二輪討論的方案是根據(jù)打完包之后生成的script src 的hash值去判斷，每次打包都會(huì)生成唯一的hash值，只要輪詢(xún)?nèi)ヅ袛嗖灰粯恿?，那一定是重新部署?

3.代碼實(shí)現(xiàn)

interface Options {
    timer?: number
}
export class Updater {
    oldScript: string[] //存儲(chǔ)第一次值也就是script 的hash 信息
    newScript: string[] //獲取新的值 也就是新的script 的hash信息
    dispatch: Record<string, Function[]> //小型發(fā)布訂閱通知用戶(hù)更新了
    constructor(options: Options) {
        this.oldScript = [];
        this.newScript = []
        this.dispatch = {}
        this.init() //初始化
        this.timing(options?.timer)//輪詢(xún)
    }
    async init() {
        const html: string = await this.getHtml()
        this.oldScript = this.parserScript(html)
    }
    async getHtml() {
        const html = await fetch('/').then(res => res.text());//讀取index html
        return html
    }
    parserScript(html: string) {
        const reg = new RegExp(/<script(?:\s+[^>]*)?>(.*?)<\/script\s*>/ig) //script正則
        return html.match(reg) as string[] //匹配script標(biāo)簽
    }
    //發(fā)布訂閱通知
    on(key: 'no-update' | 'update', fn: Function) {
        (this.dispatch[key] || (this.dispatch[key] = [])).push(fn)  
        return this;
    }
    compare(oldArr: string[], newArr: string[]) {
        const base = oldArr.length
        const arr = Array.from(new Set(oldArr.concat(newArr)))
        //如果新舊length 一樣無(wú)更新
        if (arr.length === base) {
            this.dispatch['no-update'].forEach(fn => {
                fn()
            })
        } else {
            //否則通知更新
            this.dispatch['update'].forEach(fn => {
                fn()
            })
        }
    }
    timing(time = 10000) {
         //輪詢(xún)
        setInterval(async () => {
            const newHtml = await this.getHtml()
            this.newScript = this.parserScript(newHtml)
            this.compare(this.oldScript, this.newScript)
        }, time)
    }
}

代碼用法

//實(shí)例化該類(lèi)
const up = new Updater({
    timer:2000
})
//未更新通知
up.on('no-update',()=>{
   console.log('未更新')
})
//更新通知
up.on('update',()=>{
    console.log('更新了')
})