纯前端实现版本自动更新?分享 1 段优质 JS 代码片段!

本内容首发于工粽号：程序员大澈，每日分享一段优质代码片段，欢迎关注和投稿！

大家好，我是大澈！

本文约 1100+ 字，整篇阅读约需 2 分钟。

今天分享一段优质 JS 代码片段，纯前端实现了版本自动更新检测。

老规矩，先阅读代码片段并思考，再看代码解析再思考，最后评论区留下你的见解！

// 保存旧的html代码字符串
let oldHtml;

// 从服务端获取最新的html代码
async function fetchHtml() {
    // fetch('/index.html')获取的就是html文件，
    // 再用text()转为字符串
    // 加上时间戳避免缓存
    return await fetch(`/index.html?timestamp=${+new Date()}`)
        .then(res => res.text())
}

// 判断需不需要更新
async function needUpdate() {
    const newHtml = await fetchHtml()
    // 默认不需要更新
    let result = false
    if (oldHtml && oldHtml !== newHtml) {
        // 有旧值，并且新旧值不同，才需要更新
        result = true
    }
    // 没有旧值，或者新旧值一样，就无需更新
    
    // 无论用户更不更新版本，都更新旧值，
    // 这样当用户选择不更新时就不会再提示了
    // 除非刷新页面
    oldHtml = newHtml
    return result
}

// 递归调用，3秒一次
function autoRefresh() {
    setTimeout(async () => {
        if (await needUpdate()) {
            console.log('需要更新')
            const res = confirm('有新版本，点击确定更新')
            if (res) {
                location.reload()
            }
        }
        autoRefresh()
    }, 3000)
}

autoRefresh()

分享原因

这段代码展示了一种实用的页面动态更新机制的实现方式。

不需要用户操作，且纯前端，就做到了实时检测更新。

通过巧妙地结合异步操作、缓存处理、版本比较以及递归定时任务，实现了从服务器获取最新 HTML 代码，并根据新旧版本差异，决定是否提示用户更新的功能。

代码解析

1. function fetchHtml()

fetchHtml 函数是一个异步函数，用于从服务器获取 /index.html 页面的 HTML 代码。

通过在 URL 中添加时间戳来避免浏览器缓存。

获取到响应后，使用 text() 方法将其转换为字符串并返回。

2. function needUpdate()

needUpdate 函数也是异步的，它首先调用 fetchHtml 函数获取新的 HTML 代码并存放在 newHtml 变量中。

默认设置更新结果为 false ，如果存在旧的 HTML 代码且新旧不同，则将结果设置为 true 。

无论是否更新，都会更新 oldHtml 的值。

最后返回是否需要更新的结果。

3. function autoRefresh()

autoRefresh 函数使用 setTimeout 实现每 3 秒执行一次的递归操作。

在每次执行时，先调用 needUpdate 函数判断是否需要更新，如果需要更新，弹出确认框询问用户是否更新，若用户确认则刷新页面。

然后再次调用自身实现递归定时检查。

4. 其它实现方案

第一种：使用websocket，有新版本时后端告诉前端，或者用SSE实时通知前端。

第二种：让后端写个接口，每次前端部署更新了，后端同步更新版本号，前端轮询拿到最新版本号，和本地旧版本号对比。