调试 WebView 旧资源缓存问题：一次从偶发到复现的实战经历
移动端 WebView 与浏览器最大的差异之一就是缓存机制：浏览器支持 DevTools 清理缓存、更新资源非常便利；而 WebView 在 App 中受系统 WebView 组件和应用缓存策略影响，经常会出现资源更新后，部分用户仍加载老版本 JS/CSS，引发奇怪的线上问题。
这类问题难点在于：不是所有用户都能复现，只有特定设备/网络环境/升级路径才会触发。以下是我们在一个活动页迭代中解决用户加载到老版本脚本的问题记录。
背景：活动页面更新后部分用户功能异常
活动页面上线后，我们修复了一个按钮点击无效的 bug，并发布了新 JS 资源。大部分用户恢复正常，但个别用户仍反馈点击无响应。
通过埋点数据统计，这类异常只占总 PV 的 1~2%，但因影响实际参与，必须解决。
第一步：判断用户是否加载到新资源
通过后端接口返回的页面版本号，我们在埋点中发现异常用户请求的是最新页面 HTML，但 HTML 中引用的 JS 文件版本却是旧文件。
我们用 Charles 配合 WebDebugX，在问题设备上连接调试，确认请求路径：
https://cdn.example.com/activity/v1.2.0/main.js
服务器早已上线 v1.3.0 文件，但部分设备仍强制加载 v1.2.0。这说明浏览器或 WebView 从缓存中读取了过期资源。
第二步：复现问题与验证缓存机制
通过 Charles 的 Map Local 功能，我们在真机上强制模拟返回旧版 main.js，验证页面表现是否与用户反馈一致。结果按钮再次失效，证明旧资源是问题根源。
然后用 WebDebugX 查看资源请求的响应 header，确认服务器已正确返回 Cache-Control：
Cache-Control: no-cache, max-age=0
理论上应强制重新拉取最新资源，但部分 Android WebView 未执行 no-cache，而是优先使用 local cache。
第三步：排查 WebView 缓存策略差异
我们协助移动端团队通过 Logcat 查看 WebView 请求日志，发现部分机型仍启用了 LOAD_DEFAULT 缓存模式，该模式下只要缓存有效期内，就会使用本地缓存资源，即便服务器指示不缓存也无法生效。
而大部分新系统使用了 LOAD_NO_CACHE 或 LOAD_CACHE_ELSE_NETWORK，能更好地遵循服务器缓存头。
第四步：修复方案设计
针对缓存策略问题，我们制定了双向修复方案：
短期前端方案
-
在资源引用 URL 中增加强制更新参数：
<script src="https://cdn.example.com/activity/main.js?v=20240601"></script> -
每次版本发布更新
v参数，确保请求路径变化，从而绕开缓存。
中期后端方案
- 通过 CDN 配置给静态文件加上不可缓存策略，确保 CDN 节点不会继续提供过期资源。
长期客户端方案
- 移动端团队将 WebView 缓存策略统一改为
LOAD_NO_CACHE模式，彻底解决旧资源被缓存的问题。
第五步：验证全流程有效性
修复完成后，我们用以下方法进行多角度验证：
- 使用 Charles 观察请求地址是否携带新版本参数；
- 在 WebDebugX 中查看页面是否加载了最新资源；
- 在 QA 部门用多台低端机和慢网环境回归测试，模拟网络断开重连、App 冷启动后资源拉取表现；
- 监控埋点数据中页面版本和资源版本是否完全一致，确认没有用户再加载到老资源。
最终确认异常用户比例下降到 0%。
工具与协作流程
此次缓存问题排查中，我们的调试和分工是：
| 工具 | 用途 | 使用人 |
|---|---|---|
| WebDebugX | 查看资源加载路径、响应 header | 前端 / QA |
| Charles | 模拟缓存场景、观察真实请求 | 前端 |
| Logcat | 验证 WebView 缓存模式 | 移动端 |
| Vysor | 复现低端设备表现、录制操作过程 | QA |
总结：缓存问题的解决要从端到端出发
缓存问题不是“前端清理一下”就能解决，它涉及：
浏览器/WebView 端缓存策略；
后端或 CDN 返回的缓存头；
前端 URL 版本控制；
不同系统/厂商 WebView 兼容性。
要彻底消除老资源顽固缓存，必须让服务器、前端、客户端配置形成闭环。
调试工具（WebDebugX、Charles、Logcat）可以帮助我们还原资源加载链条，但核心是对缓存机制的整体认知与各端的配合。