前端发布缓存:旧页面和新 API 的兼容

后台已升级,平板仍使用旧脚本,可能导致接口参数不一致。发布需管理缓存和兼容窗口。

edyang · 2023-09-17

后台已升级,平板仍使用旧脚本,可能导致接口参数不一致。发布需管理缓存和兼容窗口。

HTML、静态资源和 Service Worker 有不同缓存路径。内容哈希识别资源版本,但旧入口仍可能引用旧文件;API 改版需考虑并存客户端。

前端发布缓存:旧页面和新 API 的兼容:处理路径与验证条件

一、问题的范围与前提

浏览器所看到的页面、实际请求地址与服务器收到的路径要对应起来。页面来源、代理、缓存、Cookie 和连接生命周期分别影响行为。桌面浏览器、平板与嵌入式 WebView 可能具有不同访问条件,不能把某一端成功直接视为所有终端都已通过。

二、技术分析与方案取舍

入口 HTML 可以采用适合更新的缓存策略,内容哈希资源可以长缓存,但两者引用必须成对。Service Worker 还可能独立保留旧页面,强制刷新未必等同更新。测试首次、缓存和离线恢复路径,确认真实下载文件版本。API兼容窗口覆盖旧客户端,不能每次升级都依赖用户人工清缓存。

实现时明确入口和 API 基址,页面或组件销毁后清理连接与定时器。版本更新需要考虑旧页面并存,错误提示保留网络、鉴权和依赖异常的区别。若采用代理,路径替换和协议头按预期上游核对,不能同时在多处随意拼接前缀。

三、实现与排查的顺序

  1. 区分入口和资源缓存。
  2. 使用可识别资源版本。
  3. 保存旧 API 兼容。
  4. 检查真实加载文件。

按这个顺序保留中间结果,可以区分输入条件、处理过程和最终输出。前一阶段的条件不成立时,先解释对应错误,再继续后面的试验;单次返回成功不足以覆盖整条链路。

最小示例

1
2
3
页面源 → 实际 API → 代理上游 → 后端结果
对照:方法、路径、状态码、时间
凭据:只记录是否存在,不输出实际内容

这组关系帮助区分网络、路由与身份认证。登录成功后的首条业务请求往往比统一错误文案更有用,缓存和终端生命周期也要放到同一时间链。

四、验证和结果解释

一组完整的排查资料应能展示请求方法、路径、响应状态与时间,以及相关后端记录。只展示一个登录失败截图,无法判断请求是否到达目标服务。共享记录时移除凭据和个人信息,仅保留非敏感字段、状态与必要结构。

需要验证的结果 保留的对照 不能由此推出的结论
刷新得到预期入口 固定输入与配置、对应输出 一次成功代表所有条件成功
旧终端不会误调用 中断前后状态与错误阶段 没有报错代表结果正确
资源与页面版本匹配 恢复后的同条件复测 临时恢复代表根因已经消失

验证应覆盖首次打开、缓存命中、刷新、断网恢复与后台切换。连接状态和最后有效数据分别显示,旧数据不能因页面仍打开而永久看作实时。发布后的页面和静态资源还应逐项核对,不仅检查仓库文件是否存在。

五、适用边界与结论

强制清缓存不是永久发布机制。离线能力与立即更新目标需要明确取舍。

这条路径把“区分入口和资源缓存”与“检查真实加载文件”连在一起,中间保留可复查的条件。实施时优先确认“刷新得到预期入口”,再检查“资源与页面版本匹配”;两者都满足,才能在当前样本与配置范围内评价方案。设备、数据或软件版本改变以后,相关假设需要重新验证。

参考资料