WKWebView缓存问题 - 图片资源

[TOC]

记于 2019年4月20日 凌晨12:15

ps：插入日期戳(Shift+Command+D)或者插入时间戳( Option +Shift+Command+D)

问题： 运营更新图片后 手机上重新进没有看到新资源图片（因为取缓存图片了）

一、问题分析

APP的WKWebView的默认缓存策略直接取缓存的了（1.地址一样 2.缓存策略时间长导致）

WKWebView没法设置缓存时长，H5也没法设置，只能在后台设置：

• 如下图我们的资源图片的缓存时间为30天(2592000 / 3600 /24)
  从浏览器第二次访问的时候就能看到从缓存取图片，iOS App 的web也是如此

image.png

• charles 抓包发现 H5的图片资源访问过一次了，下次进来(用缓存图片)不会再次访问（fiddler估计也是如此）； 下图为第二访问的时候不会加载这个图片了（这个图片为第一次访问的时加载图片）

image.png

二、解决方案：

1、请求头的修改 - 后台侧
(1) Cache-Control:max-age=xxxx,指明缓存过期时间

过期机制中，最重要的指令是 " max-age=<seconds> "，表示资源能够被缓存（保持新鲜）的最大时间。 相对Expires而言，max-age是距离请求发起的时间的秒数。 针对应用中那些不会改变的文件，通常可以手动设置一定的时长以保证缓存有效，例如图片、css、js等静态资源。

(2)Last-Modified/If-Modified-Since,标识资源最后修改时间

是不是这个设置有问题？？？

(3) Etag/If-None-Match,标识资源是否更新

2、每次新的图片 - 换一个链接 --- H5侧
页面的静态资源以版本形式发布，常用的方法是在文件名或参数带上一串md5或时间标记符

参考这个链接

三、苹果官方WKWebView

苹果没有提供方案设置缓存时间，更改缓存默认的不是很友好！

WKWebView提供的实现了的缓存策略（NSURLRequestCachePolicy）

• NSURLRequestUseProtocolCachePolicy//默认的缓存策略
• NSURLRequestReloadIgnoringCacheData//重新请求忽略缓存
• NSURLRequestReturnCacheDataElseLoad//有缓存就返回缓存,没有就请求,需要对缓存过期进行额外处理
• NSURLRequestReturnCacheDataDontLoad//只会读取缓存目前项目中是不使用缓存,采用NSURLRequestReloadIgnoringCacheData策略.

默认的缓存策略（NSURLRequestUseProtocolCachePolicy）：

• 如果请求不存在缓存响应，则URL加载系统将从原始源获取数据。
• 否则，如果缓存的响应未指示每次都必须重新验证，并且缓存的响应未过时（超过其过期日期），则URL加载系统将返回缓存的响应。
• 如果缓存的响应过时或需要重新验证，则URL加载系统向原始源发出HEAD请求以查看资源是否已更改。如果是，则URL加载系统从原始源获取数据。否则，它返回缓存的响应。

四、W3 对Http缓存详细解释

缓存的详解解释参考链接

1.使用响应缓存作用： 来提高性能

2.如果缓存没有显着提高性能，那么缓存将毫无用处。在HTTP / 1.1中缓存的目的是在许多情况下消除发送请求的需要，并且在许多其他情况下无需发送完整响应。前者减少了许多操作所需的网络往返次数;我们为此目的使用“到期”机制（见第13.2节）。后者降低了网络带宽要求;为此，我们使用“验证”机制（参见第13.3节）。

---

参考资料：

WKWebView的缓存问题
WKWebView的缓存策略
iOS webView缓存，保证加载最新html
HTTP缓存控制小结
w3：在HTTP中缓存
Charles 功能介绍和使用教程
Charles官网使用教程
浏览器缓存知识小结