自动更新脚本实现指南：让您的应用始终保持最新（JavaScript版）

代码概述

该自动更新脚本用于在页面加载后定期检查新版本的脚本，并在发现新版本时提示用户刷新页面。以下是各个模块的详细分析：

设置更新检查间隔

const CHECK_INTERVAL = 10 * 1000; // 每10秒检查一次更新

该常量定义了更新检查的间隔时间，单位为毫秒。在此脚本中，每10秒检查一次更新。

记录页面状态

let isPageHidden = false; // 页面是否隐藏

此变量用于记录页面是否处于隐藏状态，以避免在页面不可见时进行不必要的更新检查。

定时器ID和更新提示控制

let updateTimerId = null; // 定时器ID
let shouldShowUpdatePrompt = true; // 是否需要提示用户更新

updateTimerId 用于存储定时器的ID，以便在需要时停止定时器。shouldShowUpdatePrompt 用于控制是否需要提示用户更新。

脚本标签存储

let oldScripts = []; // 旧的脚本标签数组
let newScripts = []; // 新的脚本标签数组

这些数组分别用于存储旧的和新的脚本标签，以便进行比较。

获取HTML内容

async function fetchHtml() {
    try {
        const response = await fetch('/');
        if (!response.ok) {
            throw new Error('Failed to fetch HTML');
        }
        return response.text();
    } catch (error) {
        console.error('Error fetching HTML:', error);
        return '';
    }
}

该函数使用 fetch API 获取页面的HTML内容，并处理可能的错误。如果获取失败，会返回一个空字符串。

解析HTML中的脚本标签

function parseScripts(html) {
    const scriptRegex = /<script(?:\s+[^>]*)?>(.*?)<\/script\s*>/ig;
    return html.match(scriptRegex) || [];
}

使用正则表达式解析HTML中的脚本标签，并返回匹配到的脚本标签数组。如果没有匹配的标签，则返回一个空数组。

初始化检查更新流程

async function initializeUpdateCheck() {
    const html = await fetchHtml();
    oldScripts = parseScripts(html);
    console.log('Old scripts:', oldScripts);
}

该函数在初次加载时获取当前页面的HTML内容并解析出脚本标签，存储在 oldScripts 数组中。

比较新旧脚本标签

async function compareScripts(oldArr, newArr) {
    console.log('Comparing scripts:', oldArr, newArr);
    const combinedLength = new Set(oldArr.concat(newArr)).size;
    if (combinedLength !== oldArr.length) {
        console.warn('Scripts have been updated.');
        return true;
    }
    return false;
}

该函数比较新旧脚本标签数组，如果脚本标签的数量发生变化，返回 true 表示需要刷新页面，否则返回 false。

自动更新检查

async function autoUpdateCheck() {
    updateTimerId = setTimeout(async () => {
        const newHtml = await fetchHtml();
        newScripts = parseScripts(newHtml);

        // 页面隐藏时不检查更新
        if (!isPageHidden) {
            const shouldRefresh = await compareScripts(oldScripts, newScripts);
            if (shouldRefresh && shouldShowUpdatePrompt) {
                // 延时更新，防止部署未完成用户就刷新页面
                setTimeout(() => {
                    // 提示用户刷新页面
                    window.dispatchEvent(
                        new CustomEvent("onmessageUpdate", {
                            detail: {
                                msg: "发现系统版本更新，请刷新页面~",
                                version: '1.0.0' // 可动态获取版本号
                            },
                        })
                    );
                }, 10000);
                shouldShowUpdatePrompt = false;
            }
        }

        if (shouldShowUpdatePrompt) {
            autoUpdateCheck();
        }
    }, CHECK_INTERVAL);
}

该函数使用定时器定期检查更新，并在发现新版本时通过自定义事件通知用户刷新页面。页面隐藏时不进行更新检查，以减少不必要的资源消耗。

停止更新检查

function stopUpdateCheck() {
    if (updateTimerId) {
        clearTimeout(updateTimerId);
        updateTimerId = null;
    }
}

该函数用于停止定时器，从而停止更新检查。

开始检查更新

async function startUpdateCheck() {
    await initializeUpdateCheck();
    autoUpdateCheck();

    // 监听页面隐藏和显示事件
    document.addEventListener('visibilitychange', () => {
        isPageHidden = document.hidden;
        if (!isPageHidden && shouldShowUpdatePrompt) {
            autoUpdateCheck();
        } else {
            stopUpdateCheck();
        }
    });
}

该函数启动更新检查流程，并监听页面的可见性变化，以决定是否继续进行更新检查。

导出启动函数

export default { start: startUpdateCheck };

最后，将启动更新检查的函数导出，以便在其他模块中使用。

✨ 效果展示

这个提示可以自己根据工程所用的UI组件库自行实现效果，示例图是基于 ElementUI 组件库实现

🎀 结论

通过以上步骤，我们实现了一个简单但功能强大的自动更新脚本。它可以定期检查更新，并在发现新版本时提示用户刷新页面，从而确保用户始终使用最新版本的应用程序。这种自动化更新机制可以显著提升用户体验和应用程序的稳定性。
🎉 如果你有任何问题或建议，欢迎在评论区留言讨论！也可以去 苏宛墨の小破站 留言讨论！