移动端App切后台时SSE连接会被系统中断，需通过visibilitychange检测状态、延迟重建连接、last-event-id断点续传、心跳探测降级轮询及本地缓存+全量快照合并来保障消息可靠性。
移动端App切后台时，系统会挂起WebView或冻结JavaScript执行，SSE连接无法自动重连或心跳保活。前端不能“阻止挂起”，但可通过状态检测 + 主动恢复策略最小化断连影响。
监听页面可见性变化，及时感知切后台
利用 document.visibilityState 和 visibilitychange 事件判断页面是否进入后台：
- 当
document.visibilityState === 'hidden'时，主动关闭当前EventSource（避免残留连接或内存泄漏） - 当切回前台（
'visible'）时，延迟1–2秒再重建连接（避开系统资源未就绪阶段） - 注意：iOS Safari在后台时定时器、fetch、WebSocket均受限，SSE底层的HTTP长连接也会被系统中断，不可依赖 setTimeout 维持连接
连接重建需带服务端校验与断点续传支持
SSE标准支持 last-event-id，服务端需配合实现消息幂等与游标续传：
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- 前端创建 EventSource 时传入上次收到的 ID：
new EventSource('/stream?last_id=xxx') - 服务端根据该 ID 从对应位置继续推送未消费消息（如 Redis Stream XREAD、数据库时间戳查询）
- 避免简单轮询重连，防止重复推送或消息丢失
降级兜底：用轻量心跳探测 + 被动唤醒机制
虽不能靠定时器保活SSE，但可在切回前台后快速确认连接有效性：
立即学习“Java免费学习笔记（深入）”；
- 重建连接后，立即发送一次轻量 HTTP GET 请求（如
/health?ts=xxx）验证服务端可达性 - 若 SSE open 事件迟迟不触发（如超时 8s），视为连接失败，可降级为短轮询（仅临时、低频，如每30秒一次）直到 SSE 恢复
- 不推荐在后台持续发心跳请求——多数系统会直接丢弃或限频，且耗电
增强容错：前端本地缓存关键状态并合并更新
切后台期间可能丢失部分事件，需业务层协同保障最终一致性：
- 收到 SSE 消息时，将关键数据（如订单状态、未读数）暂存 localStorage 或 IndexedDB
- 切回前台重建连接后，先拉取一次全量快照接口（如
/api/status），与本地缓存 diff 合并 - 对强实时场景（如聊天），可额外用 WebSocket 作为备用通道（需 App 原生层保活支持）
