前端项目部署,想要自动检测更新后通知用户刷新页面,但是发版后main.js入口文件不调用为什么?

Question

想实现,"前端项目部署自动检测更新后通知用户刷新页面".但是发版后,main.js入口文件并不再次执行是为什么?
在main.js引入了version版本比较,但是发版之后,浏览器页面并不会自动再次执行main.js,导致用户如果之前一直在老页面,即便我发版,他也更新不到.

我是用oss发版的,文件名字hash我也做了处理,但是为什么引用文件名字都变了,浏览器还是老页面吗呢,不去读最新的资源文件
但是项目页面如果不刷新(下图是老页面读的),一直停留在老页面,他就一直访问老页面js,导致我的版本更新代码他读不到

这种我要怎么处理

Answer 1

在掘金看到的监测页面更新的方法，使用了new Worker，直接去请求页面获取etag、last-modified，判断和之前的是否相等，实测可用，定时器时间可以自定。

  try {
        const worker = new Worker(new URL('./utils/autoUpdate.ts', import.meta.url), {
            type: 'module',
        });

        worker.postMessage({
            url: `${window.location.protocol}//${window.location.host}`,
        });

        worker.onmessage = (e) => {
            if (e.data === 1) {
                ElMessageBox.alert('页面已更新，点击刷新页面', {
                    confirmButtonText: '刷新',
                    showClose: false,
                    callback: (action: any) => {
                        window.location.reload();
                    },
                });
            }
        };

        worker.onerror = (err) => {
            console.error('->>>err', err);
        };
    } catch (Err) {
        console.error('11111->>>err', Err);
    }

utils/autoUpdate.ts

export let previousTimeTag: string | null; // 时间戳，响应头中的tag和last-modified字段之一
let url: string; // 请求的url
let intervalTimer: number; // 轮询的定时器
// 获取当前最新时间戳
async function getTimeTag() {
    const res = await fetch(url, {
        method: 'HEAD',
        cache: 'no-cache',
    });
    return res.headers.get('etag') || res.headers.get('last-modified');
}

// 判断Tag是否发生变化
async function juede() {
    const currentTimeTag: string | null = await getTimeTag();
    console.log('currentTimeTag--> ' + currentTimeTag, ' ________ ' + 'previousTimeTag--> ' + previousTimeTag);

    if (currentTimeTag !== previousTimeTag) {
        intervalTimer && clearInterval(intervalTimer);
        self.postMessage(1);
    }
}

self.onmessage = function (e): void {
    const data = e.data;
    if ('url' in data) {
        try {
            url = data['url'];
            (async function () {
                // 通过立即执行函数，记录首次请求的时间戳，以便与后面轮询得出的时间戳进行对比
                previousTimeTag = await getTimeTag();
                intervalTimer && clearInterval(intervalTimer);
                // 执行轮询juede函数
                intervalTimer = setInterval(juede, 60 * 1000 * 5);
            })();
        } catch (err) {
            console.log('Worker got unknown message:111' + err);
        }
    } else {
        console.log('Worker got unknown message:' + data);
    }
};

Answer 2

轮询。
最近某视频网站恰巧有人做过演示，去搜搜看看。

Answer 3

推荐一个插件 @plugin-web-update-notification，可以在前端项目打包后，提示用户刷新页面。

以 git commit hash (也支持 svn revision number、package.json version、build timestamp、custom) 为版本号，打包时将版本号写入 json 文件。客户端轮询服务器上的版本号（浏览器窗口的 visibilitychange、focus 事件辅助），和本地作比较，如果不相同则通知用户刷新页面。