Page Lifecycle API 管理 PWA 资源回收与恢复

本文深入解析了如何利用 Page Lifecycle API 精准管理 PWA 在后台冻结与恢复全过程：强调必须主动监听 freeze 和 pagehide（persisted === true）双事件，在 JavaScript 被强制挂起前的“最后窗口期”完成轻量可序列化的状态快照（存于 sessionStorage）与分层资源清理（定时器、连接、动画帧等），并依靠可靠的 resume 事件而非 visibilitychange 或 pageshow 进行高效恢复，避免竞态、卡顿和重复请求——真正实现“冻结即准备，唤醒即就绪”的高性能离线体验。

用 Page Lifecycle API 管理 PWA 后台冻结，核心不是“等它冻住再反应”，而是主动识别冻结前的最后执行窗口，在 JS 被挂起前完成资源清理与状态快照。

冻结前必须监听 freeze + pagehide 双事件

freeze 是最直接的冻结信号，但 iOS Safari 16.4 之前、部分安卓定制系统可能跳过它；pagehide 且 event.persisted === true 则是更普适的兜底时机——说明浏览器准备进 bfcache 或冻结流程。

• 在 freeze 回调中立即执行 saveState() 和 cleanupResources()，并设标记 frozen = true 防重复
• 在 pagehide 中检查 if (e.persisted && !frozen)，满足则补一次保存+清理
• 加时间防抖：用 performance.now() 记录上次操作时间，200ms 内不重复触发

资源回收要分层执行，不能只清状态

冻结时 JS 执行环境会停摆，但内存和 DOM 仍保留。若不清掉定时器、长连接、动画帧或未 resolve 的 Promise，恢复后可能引发竞态、重复请求或 UI 卡顿。

• 清除所有 setInterval / setTimeout ID（存 ID 数组便于统一 clearTimeout）
• 关闭 WebSocket、EventSource 连接，重置 fetch 请求控制器（AbortController）
• 暂停 requestAnimationFrame 循环，取消 IntersectionObserver 实例
• 避免在 freeze/pagehide 中读取 DOM 布局属性（如 offsetHeight），此时可能返回 0

恢复时靠 resume 事件精准还原，而非 visibilitychange

pageshow 或 visibilitychange 在冻结→激活过程中不可靠：前者会在刷新后也触发，后者可能延迟或缺失。resume 是唯一专为“从冻结态唤醒”设计的事件，且只在真实恢复时触发。

• 在 resume 中重新启动关键定时器（如心跳、轮询）、重建 WebSocket 连接
• 根据 sessionStorage 中保存的状态，手动同步滚动位置、表单值、选中项
• 不要重 render 整个页面，DOM 和事件监听器都还在，只需修复“时间停摆”导致的偏差
• 检查是否有 pending 的上传或异步任务，按需续传或降级提示

状态保存内容必须轻量、可序列化、有边界

冻结阶段禁止发起新请求、无法访问某些 API（如 Web Audio、Geolocation），所以存的数据只能是纯 JSON 安全的原始值。

• 优先存用户可见状态：scrollY、当前 tab、textarea.value（截断至 1000 字符防溢出）、video.currentTime
• 禁用 DOM 节点、函数、Date 对象、RegExp 等不可序列化类型——JSON.stringify 会静默丢弃
• 用 sessionStorage 存储，生命周期匹配单次会话；敏感信息（如 token）不存，resume 时走服务端校验
• 真机测试必须覆盖锁屏、通知栏下拉、最近任务切换等场景，桌面 DevTools 模拟不具代表性

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。