H5 和移动端 WebView 缓存机制

[pengkobe]

https://mp.weixin.qq.com/s/qHm_dJBhVbv0pJs8Crp77w

为什么强制刷新在去除缓存上不总是能奏效的

特殊情况

• 手动刷新页面（F5)，浏览器会直接认为缓存已经过期（可能缓存还没有过期），在请求中加上字段：Cache-Control:max-age=0，发包向服务器查询是否有文件是否有更新。

• 强制刷新页面（Ctrl+F5)，浏览器会直接忽略本地的缓存（有缓存也会认为本地没有缓存），在请求中加上字段：Cache-Control:no-cache（或 Pragma:no-cache），发包向服务重新拉取文件

尽快更新

• 方法一 修改请求header头，比如php添加：

  header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
  header("Cache-Control: no-cache, must-revalidate");
  header("Pragma: no-cache");

• 方法二 修改html的head块

  <META HTTP-EQUIV="pragma" CONTENT="no-cache">
  <META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">
  <META HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08:21:57 GMT">
  <META HTTP-EQUIV="expires" CONTENT="0">  

• 方法三：添加随机参数, 对于图片或者css，可使用该方式, 对于js则可以直接使用时间戳

cache manifest

• 会在 cache manifest 文件本身发生变化时更新缓存。而 cache manifest 中的资源文件发生变化并不会触发更新。
• 手动更新

  if(window.applicationCache.status== window.applicationCache.UPDATEREADY)
  {
  window.applicationCache.update();
  }

hybrid

android

• 网页缓存

  /data/data/package_name/cache/
  /data/data/package_name/database/webview.db
  /data/data/package_name/database/webviewCache.db

• 应用缓存

  setAppCachePath(String appCachePath)

  ios

• iOS 的 UIWebView 组件不支持 html5 应用程序缓存的方式
• 对于协议缓存，可以使用 sdk 中的 NSURLCache 类, NSURLCache 会存放在 home 内的子目录 Library/ Caches下，以 Bundle Identifier 为文件夹名建立 Cache 的存放路径。

更多可以参考

• https://segmentfault.com/a/1190000004132566