H5页面在android的webview中后退页面的cache问题解决

上传于 | In
工作中遇到了在android的dwebview中的h5页面在后退返回时缓存了页面部分导致ajax分页数据异常,总结了一下此类问题的解决方案。

问题背景

  • H5页面有时候和用户交互完后返回其他页面 需要实时看见更改状态效果，但由于浏览器的缓存机制导致页面没有更新，用户体验不好
  • 原因：在移动端HTML5浏览器和webview中，“后退到前一个页面”意味着：前一个页面的html/js/css等静态资源的请求（甚至是ajax动态接口请求）根本不会重新发送，直接使用缓存的响应，而不管这些静态资源响应的缓存策略是否被设置了禁用状态。
  • 后退返回到上一个页面的表现，一句话总结就是：html/js/css/接口等资源直接使用前一次请求过的，而JS中的代码从头开始重新执行了一遍。这在一些场景下会导致严重的bug，所以才会提出“后退刷新”的需求。
  • “后退刷新”的目标是浏览器在后退返回到前一个页面时，能从server端请求到一个全新的的页面内容（即status code 200 ok或status code 304 not modified的页面响应，而不是status 200 from cache根本不向server端请求）进行加载展示并重新执行JS代码。

思路和方案

浏览器历史纪录和HTTP 缓存

  • PC浏览器实现后退刷新的方法是给响应添加Cache-Control的header，如果server返回页面响应的headers中包含如下内容：

Cache-Control: no-cache,no-store,must-revalidate Expires: Thu, 01 Jan 1970 00:00:00 GMT Pragma: no-cache