JS前端重新部署通知使用者重新整理網頁

2023-01-16 14:02:05

1.目標場景

有時候上完線，使用者還停留在老的頁面，使用者不知道網頁重新部署了，跳轉頁面的時候有時候js連線hash變了導致報錯跳不過去，並且使用者體驗不到新功能。

2.思考解決方案

如何去解決這個問題思考中...

如果後端可以配合我們的話我們可以使用webSocket 跟後端進行實時通訊，前端部署完之後,後端給個通知，前端檢測到Message進行提示，還可以在優化一下使用EvnentSource 這個跟socket很像只不過他只能後端往前端推播訊息，前端無法給後端傳送，我們也不需要給後端傳送。

以上方案需要後端配合，奈何公司後端都在忙，需要純前端實現。

重新進行思考...

根據和小夥伴的討論得出了一個方案，在專案根目錄給個json 檔案，寫入一個固定的key值然後打包的時候變一下，然後程式碼中輪詢去判斷看有沒有變化，有就提示。

果然是康老師經典不知道。

但是寫完之後發現太麻煩了，需要手動設定json檔案，還需要打包的時候修改，有沒有更簡單的方案，進行第二輪討論。

第二輪討論的方案是根據打完包之後生成的script src 的hash值去判斷，每次打包都會生成唯一的hash值，只要輪詢去判斷不一樣了，那一定是重新部署了.

3.程式碼實現

interface Options {
    timer?: number
}
export class Updater {
    oldScript: string[] //儲存第一次值也就是script 的hash 資訊
    newScript: string[] //獲取新的值 也就是新的script 的hash資訊
    dispatch: Record<string, Function[]> //小型釋出訂閱通知使用者更新了
    constructor(options: Options) {
        this.oldScript = [];
        this.newScript = []
        this.dispatch = {}
        this.init() //初始化
        this.timing(options?.timer)//輪詢
    }
    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+[^>]*)?>(.*?)</scripts*>/ig) //script正則
        return html.match(reg) as string[] //匹配script標籤
    }
    //釋出訂閱通知
    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 一樣無更新
        if (arr.length === base) {
            this.dispatch['no-update'].forEach(fn => {
                fn()
            })
        } else {
            //否則通知更新
            this.dispatch['update'].forEach(fn => {
                fn()
            })
        }
    }
    timing(time = 10000) {
         //輪詢
        setInterval(async () => {
            const newHtml = await this.getHtml()
            this.newScript = this.parserScript(newHtml)
            this.compare(this.oldScript, this.newScript)
        }, time)
    }
}

程式碼用法

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