PWA更新弹窗需基于Service Worker生命周期设计：检测waiting状态后轻量提示，明确收益与操作后果，支持立即刷新、稍后提醒、不再提示及关闭；适配离线、iOS、低内存等场景，并结合version.json实现语义化版本管理。
PWA 应用的更新弹窗不能简单照搬原生 App 的强制跳转逻辑——它依赖 Service Worker 的缓存控制与生命周期，需兼顾离线能力、用户体验和版本一致性。设计“优雅”的更新提示，核心是：不打断当前操作、明确告知变化、提供可控选择、支持静默回退。
利用 Service Worker 检测并触发更新时机
Service Worker 是 PWA 更新机制的中枢。新版本上线后，浏览器会在后台静默安装新 SW，但不会立即激活；只有当所有页面关闭或用户刷新后，新 SW 才会接管。因此，检测更新应聚焦于“新 SW 已安装待激活”这一状态：
- 在页面中监听
navigator.serviceWorker.addEventListener('controllerchange')，表示当前页面已被新 SW 控制（适合刷新后场景） - 更主动的方式是轮询检查注册状态：
navigator.serviceWorker.getRegistration()，再调用registration.waiting?.postMessage({type: 'SKIP_WAITING'})唤醒待激活 SW - 推荐组合策略：页面加载时检查是否有
waitingSW；用户停留超 60 秒后再次检查，避免首屏误判
弹窗文案与交互要轻量、可逆、有信息量
用户看到弹窗时，最关心的是“为什么要点？点了会怎样？不点会怎样？”——避免模糊表述如“发现新版本”，而应具体化：
- 标题写清收益，例如：“新版已就绪｜修复了表格导出卡顿问题”
- 正文简述 1–2 个关键改进（功能/性能/安全），不罗列 changelog
- 按钮文案区分意图：“立即刷新”（当前页重载 + 激活新 SW）、“稍后提醒”（设 localStorage 标记，3 小时后重试）、“不再提示”（仅本次域名下禁用，非全局关闭）
- 右上角关闭图标必须保留，且点击后不刷新也不退出，仅隐藏弹窗
适配多端与弱网场景的降级策略
PWA 运行环境差异大，弹窗逻辑需具备弹性：
- 若检测到用户处于离线状态，不显示更新弹窗，改用底部横幅提示：“已缓存最新版，联网后自动生效”
- 在 iOS Safari 上，因不支持
skipWaiting，无法强制激活新 SW，弹窗应改为：“请手动下拉刷新页面以应用更新” - 对低内存设备（可通过
navigator.deviceMemory判断 ≤2GB），延迟弹窗时机至用户空闲（如鼠标停止移动 5 秒后） - 所有弹窗展示前，校验当前页面是否为关键操作页（如表单未提交、编辑器有未保存内容），若是则推迟至用户离开该页或主动保存后
配合 manifest 和版本标识实现语义化管理
光靠 SW 状态不够直观，建议将版本号注入 manifest 或独立 version.json，便于前端比对：
- 构建时生成
/version.json?ts=xxx，含{"version": "2.3.1", "buildTime": "2026-10-08T14:22:00Z"} - 前端 fetch 该文件（带 no-cache 头），与当前运行版本对比；若不一致，再结合 SW 状态决定是否触发弹窗
- manifest 中的
short_name可动态注入版本后缀（如 “记账助手 v2.3”），让用户在桌面图标上也感知更新
