一、背景与目标

问题场景

普通 H5部署新版本后已经打开页面的使用者仍在使用旧版本代码，无法感知到更新。从这会导致来看，

• 功能不一致新旧版本 API 不兼容，旧页面调用接口报错
• Bug 未修复使用者停留在有 Bug 的旧版本，持续受影响
• 体验割裂不同使用者看到不同的页面效果

主要目标

检测新版本 → 通知使用者 → 引导更新 → 保障数据安全

与 App 内嵌 H5 的区别

二、整体架构

┌─────────────────────────────────────────────────────┐
│ 服务端 │
│ ┌──────────┐ ┌──────────┐ ┌──────────────────┐ │
│ │ 版本接口 │ │ WebSocket│ │ 建立时注入 │ │
│ │ /version │ │ 推送 │ │ 版本号/建立时间 │ │
│ └──────────┘ └──────────┘ └──────────────────┘ │
├─────────────────────────────────────────────────────┤
│ 前端层 │
│ ┌──────────┐ ┌──────────┐ ┌──────────────────┐ │
│ │轮询检测 │ │ 可见性检测│ │ 使用者状态感知 │ │
│ ├──────────┤ ├──────────┤ ├──────────────────┤ │
│ │版本对比 │ │提示策略 │ │ 数据保全 │ │
│ └──────────┘ └──────────┘ └──────────────────┘ │
└─────────────────────────────────────────────────────┘

三、版本检测机制

版本号注入

在项目建立阶段，将版本信息写入前端可访问的位置：

方案 A：index.html 注入 meta 标签

方案 B：公共 version.json 文件

{
"version": "","hash": "a1b2c3d4"
}

方案 C：JS 全局变量注入

推荐组合：A + C。Meta 用于统一检测脚本，全局变量供业务代码直接读取。

版本检测策略

① 定时轮询

class VersionChecker {
constructor {
this.currentVersion = options.currentVersion || window.__APP_VERSION__;this.checkUrl = options.checkUrl || '/version.json';this.interval = options.interval || 60000;老实说，// 默认60s
this.timer = null;this.listeners =;不过，}
start {
this.check;// 首次立即检查
this.timer = setInterval => this.check,this.interval);}
stop {
clearInterval;this.timer = null;}
async check {
try {
const resp = await fetch}`,{
从cache来看。'no-cache',headers: { 'Cache-Control': 'no-cache' }
});const data = await resp.json;if {
this.notify;}
} catch {
console.warn;}
}
onUpdate { this.listeners.push;}
notify { this.listeners.forEach);}
}

② 页面可见性检测

class VisibilityVersionChecker extends VersionChecker {
constructor {
super;this.handleVisibility = this.handleVisibility.bind;}
start {
super.start;document.addEventListener;}
stop {
super.stop;document.removeEventListener;}
handleVisibility {
if { this.check;}
}
}

推荐组合：定时轮询 + 页面可见性检测，兼顾实时性与资源消耗。

③ WebSocket 推送

class WsVersionChecker {
constructor {
this.currentVersion = opts.currentVersion;this.wsUrl = opts.wsUrl;其实，this.listeners =;}
connect {
this.ws = new WebSocket;this.ws.onmessage = e => {
const msg = JSON.parse;if {
this.listeners.forEach);}
}，this.ws.onclose = => setTimeout => this.connect,5000);}
}

④ Service Worker

// sw.js
self.addEventListener);// 页面侧监听
navigator.serviceWorker.addEventListener => showUpdateNotice);

各策略对比

Service Worker页面跳转瞬间低（PWA 已部署即可)Chrome/Edge/FirefoxPWA 或离线需求

注实际选型请结合业务对“实时性”和“使用者打扰程度”的要求。

四、使用者更新提示策略​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

**使用者痛点**：收到强制刷新的弹窗却正好在编辑表单，导致已填信息全部丢失；频繁弹窗又会产生厌烦情绪。

策略分级  

静默更新 → 温和提示 → 强制更新
//

温和提示
javascript
function showUpdateNotice{
const state=detectUserState;说起来，if{
showEditingAwareNotice;return，}
showNormalBanner;}
function showNormalBanner{
const banner=document.createElement;banner.className='version-update-banner';banner.innerHTML=`

🔔 有新版本可用，请刷新获取最新内容。`，banner.style.cssText=`
position:fixed;top:0，left:0;right:0，z-index:9999;background:#1890ff;color:#fff，padding:12px;display:flex;justify-content:center;align-items:center;`，document.body.prepend;}
对应 CSS：
css
.version-update-banner .btn-refresh{
margin-left:12px;padding:6px12px;border:1px solid #fff;border-radius:4px;background:#fff0;color:#1890ff;cursor:pointer;}
.version-update-banner .btn-dismiss{
margin-left:8px;padding:6px12px;background:none;border:none，其实，color:#fff80;cursor:pointer;}
@keyframes slideDown{from{transform:translateY;}to{transform:none;}}

模态弹窗
javascript
function showModalNotice{
const mask=document.createElement;mask.className='update-modal-mask';mask.innerHTML=`


🔔<\/div>\
\u53D1\u73B0\u65B0\u7248\u672C<\/h3\>\
\u5237\u65B0\u9875\u9762\u5373\u53EF\u83B7\u53D6<\/p\>\

立即刷新<\/button>\
我知道了<\/button>\
<\/div>
<\/div>`;mask.style.cssText=`position:fixed;inset:0，background:rgba;display:flex;align-items:center;justify-content:center;z-index:10000`;老实说，document.body.appendChild;}

倒计时强制刷新
javascript
function showForceUpdate{
let left=countdown;const mask=document.createElement;mask.className='force-update-mask';其实，mask.innerHTML=`


⚠️ \u91CD\u8981\u66F4\u65B0<\/h3>\