¿Cómo notificar correctamente al usuario que actualice la página web cuando se vuelva a implementar el código de front-end?

目标场景：

A veces, después de conectarse, el usuario aún permanece en la página anterior. El usuario no sabe que la página web se ha vuelto a implementar. Al saltar a la página, a veces cambia el hash de la conexión js, lo que provoca un salto de error y la el usuario no puede experimentar nuevas funciones.

解决方案：

De acuerdo con el valor hash del script src generado después del empaquetado, se generará un valor hash único para cada empaquetado. Siempre que se sondee para juzgar que es diferente, debe volver a implementarse.

代码实现：

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+[^>]*)?>(.*?)<\/script\s*>/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('更新了')
})

De esta forma, puede detectar si hay un relanzamiento y avisar al usuario de la actualización.