移动端App切后台后WebSocket被系统强制断开是iOS/Android资源管控所致，需采用“快速感知+可靠重建+状态补偿”策略：监听visibilitychange事件，切后台时停心跳但不主动close，切回时校验readyState并指数退避重连；配合服务端心跳确认、离线消息缓存与幂等校验，PWA场景可结合Service Worker增强离线能力。

移动端App切到后台后，WebSocket连接被系统强制断开，这不是代码bug，而是iOS和Android系统级的资源管控策略。HTML5页面本身没有原生后台保活能力，所以不能靠“保持连接”来解决，而要转向“快速感知+可靠重建+状态补偿”的思路。

监听页面可见性变化，及时响应切后台行为

WebView或PWA中，visibilitychange事件是第一道防线。用户切走时暂停心跳、释放非关键资源；切回时立刻检查连接状态并重连：

• 监听document.visibilityState：值为hidden表示页面不可见，visible表示恢复可见
• 切后台时停止心跳定时器（避免无效发包耗电），但不要主动close()连接——系统可能已断开，调用close会报错
• 切回前台时，不直接复用旧连接，而是先检查ws.readyState === WebSocket.OPEN，不成立就立即触发重连流程

实现带超时验证的心跳与重连机制

仅靠ws.isOpen判断不可靠，尤其在Android WebView或iOS WKWebView中，连接可能已断但状态未更新。需叠加业务层心跳确认：

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

• 客户端每30秒发送{"type":"ping"}，服务端必须响应{"type":"pong"}
• 维护lastPongTime时间戳，若距离当前时间超过45秒，视为连接失效
• 重连采用指数退避：1s → 2s → 4s → 8s，最大不超过30秒，避免网络未恢复时刷屏重连
• 重连失败时缓存离线消息（如聊天输入框内容），待连接恢复后按序补发

配合服务端做连接状态兜底

前端无法控制后台存活，但可以和服务端协同降低影响：

立即学习“前端免费学习笔记（深入）”；

• 每次成功连接后，向服务端上报clientId和本次连接的timestamp
• 服务端对每个客户端维护“最后活跃时间”，当检测到超时未心跳，主动清理旧会话并推送离线消息摘要（如“您有3条新消息”）
• 客户端切回前台时，先拉取未读摘要，再建立新连接，避免消息空窗期
• 关键操作（如支付确认、协作编辑）加服务端幂等校验，防止因重复重连导致指令误执行

针对PWA场景补充离线能力

如果是渐进式Web App（PWA），可利用Service Worker拦截网络请求，提供有限离线支持：

• 注册Service Worker后，在fetch事件中缓存WebSocket握手前的鉴权接口响应（如token获取）
• 连接断开时，用Cache API暂存用户发出但未确认的消息，标记status: "pending"
• Service Worker监听sync事件，在网络恢复后自动重发pending消息
• 注意：Service Worker本身也受系统限制，不能长期运行，只适合轻量级状态同步