1.为什么要通知用户刷新

• 代码更新：前端发新版了，用户不刷新可能用到老代码，bug 修了个寂寞。
• 数据缓存：接口数据更新了，但用户本地缓存还是旧数据，页面显示稀碎。
• 资源加载：CSS、JS 文件换了，用户不刷新可能样式错乱，直接丑哭。

但简单粗暴弹个弹窗催用户刷新？分分钟被投诉“用户体验稀烂”！

一 版本号对比

原理：每次发版生成唯一版本号，和用户本地存储的版本号对比，不一致就提醒刷新。

// 1. 发版时生成版本号（比如用打包时间戳）  
const currentVersion = '20231001';  

// 2. 用户首次访问时存储版本号  
const localVersion = localStorage.getItem('app_version');  
if (!localVersion) {  
  localStorage.setItem('app_version', currentVersion);  
}  

// 3. 检测版本变化  
if (localVersion && localVersion !== currentVersion) {  
  showRefreshToast('发现新版本，点击刷新以体验最新功能~');  
  // 更新本地版本号  
  localStorage.setItem('app_version', currentVersion);  
}  

// 显示提示的UI组件（示例用伪代码）  
function showRefreshToast(message) {  
  Toast.show({  
    text: message,  
    duration: 0, // 不自动关闭  
    button: '立即刷新',  
    onButtonClick: () => location.reload(),  
  });  
}  

适用场景：后台管理系统、工具类网页。

二  WebSocket 实时通知

原理：通过 WebSocket 建立长连接，服务端主动推送更新消息。

// 前端连接 WebSocket  
const ws = new WebSocket('wss://你的服务地址');  

ws.onmessage = (event) => {  
  const data = JSON.parse(event.data);  
  if (data.type === 'RELOAD_PAGE') {  
    showRefreshDialog('系统已升级，请刷新页面以继续使用~');  
  }  
};  

// 弹窗提示（示例用伪代码）  
function showRefreshDialog(message) {  
  Modal.confirm({  
    title: '温馨提示',  
    content: message,  
    okText: '立刻刷新',  
    cancelText: '稍后再说',  
    onOk: () => location.reload(),  
  });  
} 

适用场景：金融系统、实时协作工具等强实时性应用。

三 轮询检测 + 无感刷新

原理：定时轮询接口，检测资源是否更新，若更新则静默刷新。

let isReloading = false;  

// 每5分钟检测一次  
setInterval(async () => {  
  if (isReloading) return;  
  const res = await fetch('/api/check-update');  
  const { needReload } = await res.json();  
  if (needReload) {  
    isReloading = true;  
    // 无痛刷新：先提示用户，5秒后自动刷新  
    Toast.show({  
      text: '系统即将自动更新...',  
      duration: 5000,  
      onClose: () => location.reload(),  
    });  
  }  
}, 5 * 60 * 1000);  

适用场景：电商活动页、运营位频繁更新的页面。

四 Service Worker 静默更新

// sw.js  
self.addEventListener('controllerchange', () => {  
  // 检测到新 Service Worker 安装后，提示用户  
  self.clients.matchAll().then(clients => {  
    clients.forEach(client => {  
      client.postMessage({  
        type: 'SW_UPDATED',  
        message: '新版本已就绪，点击刷新即可生效~',  
      });  
    });  
  });  
});  

// 主线程监听消息  
navigator.serviceWorker.addEventListener('message', event => {  
  if (event.data.type === 'SW_UPDATED') {  
    showRefreshButton(event.data.message);  
  }  
});  

// 显示固定刷新按钮（示例用伪代码）  
function showRefreshButton(message) {  
  const btn = document.createElement('div');  
  btn.className = 'refresh-banner';  
  btn.innerHTML = `  
    <span>${message}</span>  
    <button onclick="location.reload()">刷新</button>  
  `;  
  document.body.appendChild(btn);  
}  

• 轻度更新：用版本号对比，温柔提醒。
• 实时要求高：上 WebSocket，精准打击。
• 高频更新：轮询检测 + 无感刷新，减少打扰。
• 离线应用：Service Worker 静默更新，逼格满分。