移动端省电模式会冻结websocket连接，需通过visibilitystate/pagehide监听、客户端心跳自检、延迟重连与fetch降级等多策略协同应对。
移动端省电模式（如iOS低电量模式、Android电池优化）会主动冻结或终止后台网页的WebSocket连接，导致心跳失效、消息丢失、重连失败。这不是WebSocket协议问题，而是系统级资源管控。补救核心是“感知冻结 → 安全断开 → 延迟恢复 → 智能重连”，而非强行保活。
检测页面可见性与系统休眠状态
仅靠onclose事件无法区分网络断开和系统冻结。需结合多信号交叉判断：
- 监听
document.visibilityState变化：页面切到后台时立即触发ws.close()，避免残留无效连接 - 监听
pagehide事件（比visibilitychange更可靠）：iOS Safari在页面隐藏前会触发，此时主动关闭WS并标记“待恢复” - 检查
navigator.onLine+performance.now()时间差：若两次心跳间隔突增>5秒且onLine === true，大概率是JS执行被暂停
设计轻量级心跳与断连标识机制
避免依赖服务端心跳确认——移动端冻结后，即使服务端发了ping，客户端也无法响应或接收。应改用客户端自检：
- 不依赖
ws.send('ping')，改用setTimeout模拟心跳超时：每次收到消息重置定时器；超时即认为连接异常 - 设置
isFrozen = false标志位，在pagehide中设为true；在pageshow中延迟1秒再尝试重连（避开系统刚唤醒的不稳定期） - 记录最后成功通信时间戳（
lastActive = Date.now()），页面激活时若Date.now() - lastActive > 30000，直接走完整重连流程
启用延迟重连与降级兜底策略
用户切回页面瞬间立刻重连易失败（WebView未完全恢复、网络栈未就绪）。需分层应对：
- 首次重连延迟800–1200ms（iOS实测最佳窗口），第二次起指数退避（1s→2s→4s…上限30s）
- 连续3次重连失败后，自动降级为
fetch轮询（间隔30s），直到WebSocket恢复成功再切回 - 对关键业务消息（如订单状态变更），服务端需支持“连接恢复后推送未读消息”能力，前端通过
sessionStorage存上次lastMsgId，重连后带上该ID拉取增量
适配Android电池优化白名单提示
Android 6.0+对后台网络限制极严，需引导用户手动授权：
- 检测
navigator.userAgent.includes('Android')且ws.readyState === 0（尚未打开）时，显示轻量提示：“为保障消息及时送达，建议在系统设置中将本页加入电池优化白名单” - 提供跳转链接：
intent://settings#Intent;scheme=package;package=com.android.settings;end（仅限原生App WebView；PWA需引导用户手动操作） - 不强制弹窗，用底部横幅+关闭按钮，避免影响LCP评分
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
