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

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": 1737423874141
}

3.2 构建阶段生成版本文件

在构建阶段，使用构建工具（如 Vite 或 Webpack）生成 version.json 文件，并更新版本号。以下是使用 Vite 的示例：

// vite.config.js
import {
    
     defineConfig } from 'vite';
import path from 'path';
import fs from 'fs';
​
function updateVersion() {
    
    
  return {
    
    
    name: 'update-version',
    buildStart() {
    
    
       const versionData = {
    
     version: new Date().getTime() };
       fs.writeFileSync('public/version.json', JSON.stringify(versionData));
    }
  };
}
​
export default defineConfig({
    
    
  plugins: [
    process.env.NODE_ENV === 'production' && updateVersion() //生产环境执行
  ],
});

3.3 前端检测版本更新

在前端代码中，定期请求 version.json 文件，检查是否有新版本。如果版本号不一致，显示弹窗提示用户更新，用户可以选择立即更新或稍后更新。

// utils/version.js
import axios from "axios";
​
export async function isNewVersion() {
    
    
  const url = `//${
      
      window.location.host}/version.json`;
  try {
    
    
    const res = await axios.get(url, {
    
     headers: {
    
     'Cache-Control': 'no-cache' } });
    const newVersion = res.data.version;
    const localVersion = window.localStorage.getItem('version');
​
    if (localVersion && localVersion !== newVersion) {
    
    
      alert('有新版本发布，请刷新页面！');
      window.localStorage.setItem('version', newVersion);
      window.location.reload();
    } else {
    
    
      window.localStorage.setItem('version', newVersion);
    }
  } catch (error) {
    
    
    console.log('获取线上版本号失败utils/version.js', error);
  }
}

3.4 设置定时检查

为了确保用户始终使用最新版本，可以设置一个定时器定期检查版本号。

// main.js
import {
    
     isNewVersion } from './utils/version';
​
// 设置定时器每10分钟检查一次
setInterval(isNewVersion, 10 *60* 1000);

3.5 处理缓存问题

为了避免从本地缓存中获取旧版本的 version.json 文件，可以在请求头中添加 Cache-Control: no-cache 字段。

axios.get(url, {
    
     headers: {
    
     'Cache-Control': 'no-cache' } });

4.version-polling第三方库

4.1 简介

version-polling 是一个轻量级的JavaScript库，它可以实时检测 web 应用的 index.html 文件内容是否有变化。当服务端发布新版本后，前端会自动弹出更新提示，让用户刷新页面，以加载最新的资源和功能。这样可以提高用户体验和数据准确性。

4.2 实现原理

• 使用 Web Worker API 在浏览器后台轮询请求页面，不会影响主线程运行。
• 命中协商缓存，对比本地和服务器请求响应头etag字段值。
• 如果etag值不一致，说明有更新，则弹出更新提示，并引导用户手动刷新页面（例如弹窗提示），完成应用更新。
• 当页面不可见时（例如切换标签页或最小化窗口），停止实时检测任务；再次可见时（例如切换回标签页或还原窗口），恢复实时检测任务。

4.3 实现

4.3.1 安装

npm install version-polling --save

4.3.2 使用方式

(1)通过 npm 引入，并通过构建工具进行打包

// 在应用入口文件中使用: 如 main.js, app.jsx
import {
    
     createVersionPolling } from "version-polling";
 
createVersionPolling({
    
    
  appETagKey: "__APP_ETAG__",
  pollingInterval: 5 * 1000, // 单位为毫秒
  silent: process.env.NODE_ENV === "development", // 开发环境下不检测
  onUpdate: (self) => {
    
    
    // 当检测到有新版本时，执行的回调函数，可以在这里提示用户刷新页面
    const result = confirm("页面有更新，点击确定刷新页面！");
    if (result) {
    
    
      self.onRefresh();
    } else {
    
    
      self.onCancel();
    }
    // 强制更新可以用alert
    // alert('有新版本，请刷新页面');
  },
});

(2)通过 script 引入，直接插入到 HTML

<script src="//unpkg.com/version-polling/dist/version-polling.min.js"></script>
 
  <script>
    VersionPolling.createVersionPolling({
    
    
      appETagKey: "__APP_ETAG6__",  // 每次更新时，需修改，否则不会提示页面已更新
      pollingInterval: 5 * 1000,
      onUpdate: (self) => {
    
    
        // 当检测到有新版本时，执行的回调函数，可以在这里提示用户刷新页面
        if (self.options.htmlFileUrl.indexOf('http://localhost:9527') === -1) {
    
    
          const result = confirm("系统已更新,请刷新页面 (请在刷新前注意保存当前页面数据).");
          if (result) {
    
    
            self.onRefresh();
          } else {
    
    
            self.onCancel();
          }
        }
      },
    });
  </script>

4.3.3 其余可设置的api

参数	说明	类型	默认值
appETagKey	web应用更新唯一标识字段名	string	__APP_ETAG__
pollingInterval	轮询间隔，单位为毫秒，默认为 5 分钟	number	5 * 60 * 1000
htmlFileUrl	web 应用网站运行目录	string	${location.origin}${location.pathname}
silent	安静模式，为true时，不会进行实时监测	boolean	false
silentPollingInterval	安静模式，为true时，不做轮询任务	boolean	false
silentPageVisibility	安静模式，为true时，不做页面可见状态监听	boolean	false
forceUpdate	强制更新，为true时，取消也会检查更新	boolean	false
onUpdate	更新检测的回调函数，可以自定义更新的逻辑	(self) => void	-