ArkWeb 手记 07｜缓存和离线页怎么做

HarmonyOS 7 · ArkWeb 混合应用开发手记 07

Web 页面在办公室 Wi‑Fi下秒开，不代表上线后也秒开。地铁、地下车库、网络切换时，用户看到的往往是白屏和转圈。

这一篇做缓存和离线，但不追求"什么都缓存"。

1. 先分三类东西

壳资源：HTML/CSS/JS
业务数据：接口 JSON
用户敏感数据：账号、订单等

三类资源不能用同一套缓存策略。

【配图 01：网络正常/弱网/离线三种 ArkWeb 加载路径】

2. 静态资源最适合先优化

版本化 JS/CSS 可以使用 HTTP 缓存、CDN 和稳定资源指纹。不要让 App自己重新发明一套浏览器缓存。

3. 离线页要小

断网兜底页只需要说明状态、提供重试和返回。不要做一个本身又依赖十几个在线资源的"离线页"。

4. 本地 rawfile 适合兜底壳

必要的错误页、协议模板或固定资源可以跟 App一起发布。加载本地页面时仍然要注意资源路径和访问边界。

5. 缓存不是越多越快

错误缓存、过期接口和旧 JS都可能造成"只有部分用户坏掉"的问题。任何缓存都应该回答两个问题：什么时候失效？怎么主动清？

6. 版本号要能看见

const WEB_BUNDLE_VERSION = '2026.09.01'

日志里打印当前 Web 资源版本，线上定位会省很多时间。

7. 离线数据谨慎保存

商品列表可以考虑短期缓存，支付结果、账号权限等不能简单拿旧数据当真。

8. 网络恢复以后不要全量狂刷

恢复网络时，只重新请求当前页面真正需要的数据。多个组件同时监听网络恢复，很容易造成瞬时请求洪峰。

9. 预编译缓存是性能工具，不是业务缓存

官方性能规则提到可通过 JavaScript预编译生成字节码缓存来降低页面加载时间。它解决的是执行性能，不等于你的业务数据缓存。两者别混。

10. 小结

缓存策略的目标是"可预测地快"，不是"尽可能多地存"。下一篇继续做性能，把预连接、预取、首屏和测量真正串起来。