解决安卓机上 h5 返回后不刷新的问题

790 阅读2分钟

现象

由于安卓浏览器的缓存机制, 出现了回到上一个页面不刷新的情况

最近在开发一个 h5,页面上有一个显示抽奖状态的按钮,在可抽奖次数 > 0 时,按钮文案为“去抽奖”,点击后跳转至抽奖页面。这就需要在用户从抽奖页面返回 h5 时,页面需要重新进行查询,以展示最新状态。

测试反馈未按预期效果进行更新,排查后发现返回后确实调了接口并获得了返回值,https的 start time 也表明这确实是调了两次接口。

iwEdAqNqcGcDAQTRBGsF0QmEBrDV0egaTw8xcwYCXIdADzUAB9IZptznCAAJomltCgAL0gADqFk.jpg_720x720q90.jpg iwEcAqNqcGcDAQTRBHsF0QmEBrC2rUhJGPdTSwYCXLWChucAB9IZptznCAAJomltCgAL0gADzio.jpg_720x720q90.jpg

妥了,这一定是后端在坑害我,立马让测试去找后端排查,但后端表示:你根本就没调我接口啊!

h5控制台看起来调了接口并成功返回了,但后端那里没日志,也就是说我的 h5 假装发了请求并自己编了数据返给我?

通常在浏览器缓存机制中,在返回上一页的操作中, html/css/js/接口 等动静态资源不会重新请求,但是js会重新加载。 使用这种模式的缓存机制可以加快渲染速度,但是部分数据需要经常展示和编辑的情况下会导致不同步。比如‘详情页’跳转到‘编辑页’,编辑完后再返回到‘详情页’,如果‘详情页’数据展示未进行同步修改那肯定是不能接受的。 在webview和5+的混合app模式中,也会遇到这种返回上一个页面不刷新的问题

产生原因

浏览器前进/后退缓存

这里提到一个概念,浏览器前进/后退缓存(Backward/Forward Cache, BF Cache),当然也有人叫 disk Cache。 BF Cache 是一种浏览器优化, HTML 标准并未指定其如何进行缓存,因此缓存行为是各浏览器各自实现,所以不尽相同。 由于不是 HTTP 缓存,所以通过头文件缓存设置 no-cache 是无效的。当然也不能以 HTTP 缓存机制来理解 BF Cache。

解决思路

在请求接口时添加时间戳或其他随机数作为参数。