前端部署新版本,如何通知用户刷新页面？

前端部署新版本,如何通知用户刷新页面？

• 1.WebSocket或者SSE
• 2.轮询检测更新
• 3.版本号控制(与2一样都是定时监测)
• • 3.1 创建 version.json 文件
  • 3.2 构建阶段生成版本文件
  • 3.3 前端检测版本更新
  • 3.4 设置定时检查
  • 3.5 处理缓存问题
• 4.version-polling第三方库
• • 4.1 简介
  • 4.2 实现原理
  • 4.3 实现
  • • 4.3.1 安装
    • 4.3.2 使用方式
    • 4.3.3 其余可设置的api

1.WebSocket或者SSE

使用WebSocket或Server-Sent Events（SSE）等技术，可以实现服务器与客户端的实时通信。当有新版本发布时，服务器会通过这些技术将更新通知推送给客户端，前端接收到通知后，可以弹出提示框告知用户当前页面有新版本，建议刷新页面以获取最新内容。

2.轮询检测更新

在前端代码中设置一个定时器，轮询检测更新通常用于检测服务端资源（如HTML文件、JS文件）是否发生变化。例如，通过轮询获取index.html文件的版本号。这种方式比较消耗服务器。

// src/main.js
import {
    checkForUpdate } from './version/auto-update.js';
// 初始化自动更新
checkForUpdate();

// src/version/auto-update.js 
import aios from "axios"
function checkForUpdate() {
   
   const metaTag = document.querySelector('meta[name="version"]');
   const currentVersion = metaTag ? metaTag.getAttribute('content') : null;
    axios.get('xxxx').then(res=>{
   
        if (res.status === 200) {
   
           const serverVersion = res.responseText;
           if (serverVersion !== currentVersion) {
   
               alert('页面已更新，请刷新页面以查看最新内容');
               //一个通知弹框
           }
       }
    })
}
​
// 设置轮询间隔时间（例如每5分钟）
setInterval(checkForUpdate, 5 *60* 1000);

3.版本号控制(与2一样都是定时监测)

在每次部署时生成一个唯一的版本号文件（如version.json），并在前端请求时携带当前版本号。通过比较前端版本号与后端版本号，判断是否需要刷新页面。如果检测到版本更新，前端会提示用户刷新。

3.1 创建 version.json 文件

首先，在项目中创建一个 version.json 文件，用于存储当前项目的版本号。这个文件可以在构建时自动生成，并且每次构建时更新版本号。

//会在public/version.json中自动生成，无需手动创建
{
   
  "version"