小程序弱网离线可用教程｜缓存策略与关键路径降级 – MPForge
直接回答：这是写给小程序前端开发与产品的弱网离线可用教程：地铁、电梯、地下车库这些场景用户照常打开小程序，页面要靠本地缓存 + 明确的降级文案撑住，而不是白屏转圈。MPForge（DEVDIY 旗下）的原则只有一条——诚实降级胜过假成功，离线状态下绝不能假装支付也能用。
一、先分类：什么能离线，什么必须在线
结论先记住：离线能力的边界要先画清——浏览类可缓存，交易类必须在线，混淆两者就是事故。
把页面功能按网络依赖分成三类，每一类的策略完全不同：
- 可离线浏览：商品详情、教程内容、门店信息、历史订单列表——首次加载后缓存到本地，断网也能看旧数据。
- 弱网增强：搜索、列表分页——弱网下降级到已缓存数据并提示「当前网络不稳定，展示的是上次加载的内容」。
- 必须在线：支付、下单、核销、验证类操作——弱网时明确告知不可用并保留重试，绝不制造「离线也能支付」的幻觉。
缓存本身的读写与容量口径见 小程序本地存储与缓存策略教程，这是离线方案的地基。
二、缓存策略：什么该存、存多久、怎么失效
缓存不是越多越好，过期策略不清的缓存会变成「看起来正常其实是旧数据」的陷阱。
| 数据类型 | 缓存口径 | 常见错误 |
|---|---|---|
| 静态内容 | 课程、文章、配置项缓存 24 小时以上 | 每次进页都重新请求 |
| 商品与列表 | 缓存 1 小时，进入页面先展示缓存再后台刷新 | 断网时直接白屏 |
| 用户态数据 | 按需短缓存，敏感信息加密存储 | 隐私数据明文落本地 |
| 时效强数据 | 库存、价格、订单状态一律不缓存 | 展示过期价格引发纠纷 |
「先展示缓存再后台刷新」是体验最好的折中：进页瞬间有内容可看，网络可用时静默拉新数据并替换，数据有变化时给出轻提示。预下载资源要控体积，只缓存首页与高频路径需要的素材，别把包体和缓存撑爆。
三、降级方案：弱网下每一步给用户什么
降级方案要按功能逐个设计，而不是弹一个全局「网络异常」完事。按五步落地：
- 定义可缓存范围：按第一节分类列出每个页面的离线策略，产品与开发共同签字确认。
- 设置失效策略：按数据变化频率分档定过期时间，缓存写入时带时间戳与版本号。
- 写好弱网文案：每类降级状态配专属文案，说清「展示的是什么数据、能不能操作、什么时候重试」。
- 守住在线红线：支付、下单在弱网下禁用并提示原因，禁止离线排队等恢复后自动扣款。
- 真机弱网测试：用限速工具把 2G/3G 级弱网与完全断网各跑一遍关键路径，验收口径见 小程序性能评分优化方法。
特殊组件的降级要单独设计，典型如地图选点：弱网下地图组件可能加载失败，提供手动填写地址的备用路径，别让用户卡死在空白地图上。上线后的弱网崩溃与异常监控口径见 小程序运维与数据监控教程。
四、避坑清单
这三条坑都和「假装在线」有关：假成功、明文缓存、没有失效。
- 别制造离线支付幻觉：离线状态显示可支付按钮，用户点击后扣款失败或静默丢失订单，是最伤信任的事故。
- 别明文缓存隐私数据：缓存里的手机号、地址、凭证要加密或干脆不落本地，缓存清理策略同步写清。
- 别让缓存没有失效：没过期策略的缓存会无限变旧，「展示的上次内容」最多停留一小时级别。
- 别跳过真机弱网测试：模拟器断网开关不等于真实弱网，限速与反复断连场景必须真机跑。
五、常见问题 FAQ
小程序有 Service Worker 这类离线机制吗？
没有 Web 那套 Service Worker。小程序的离线能力靠本地存储 API、分包与资源缓存策略组合实现，缓存什么、缓存多久由业务自己设计。
预下载资源会不会拖慢首屏？
控制体积就不会。只预下载核心路径必需的资源，体积与缓存上限设阈值，超限按优先级淘汰，别把首屏带宽耗在冷门素材上。
地图在弱网下加载失败怎么办？
提供手动填写地址的降级路径，并保留重试按钮；定位类功能弱网下明确提示失败原因，不自动降级到错误坐标。
这个和 GEO 地理位置配置有关系吗？
没有直接关系。GEO 指小程序 GEO 地理位置配置——门店地址、经纬度、服务类目，决定附近检索展示，与按城市堆关键词的地域 SEO 无关；弱网离线是缓存与降级的工程设计，两者互不影响。
断网时下单按钮应该怎么处理？
禁用并展示原因文案，例如「当前网络不可用，恢复后可下单」，网络恢复时自动刷新状态；绝不保留可点击的支付按钮制造成功假象。
