html5离线缓存 ios支持,iOS html5使用缓存并及时更新方案总结

最近一段时间研究了一下H5在iOS移动端表现时使用缓存并可及时更新方案，总结如下：

一、使用Webview自带缓存机制

当我们使用webview加载html资源时的，本质上就是一个向服务器索取资源的http请求过程，如果此时我们设置对于http请求时的缓存策略，那么就可以很好的把资源文件保存在内存空间和本地的沙盒文件中(iOS)；当我们下次在加载的时候，如果加载的是同一个http请求地址时，此时 如果本地有缓存，那么直接返回本地资源；如果没有本地缓存则向服务器请求地址；大致如下过程

具体的流程和相关设置如下：

1.IOS端加载html页面内容，此处我使用的　NSURLRequestReturnCacheDataElseLoad的缓存策略，即有缓存时使用缓存，无缓存时，直接向服务器请求；

NSURL *url = [NSURL URLWithString:self.url];

NSURLRequest *request = [[NSURLRequest alloc] initWithURL:url cachePolicy:NSURLRequestReturnCacheDataElseLoad timeoutInterval:20];

[webView loadRequest:request];复制代码

2.html5端：不需要设置如下代码，经测试发现，如果在上面的iOS端设置好了http加载的缓存策略时，优先以IOS端的设置的缓存策略为主，即ios 设置了缓存策略，而html5设置 不缓存，那么结果还是会缓存的；

复制代码

3.iOS端不需要设置清除缓存的代码，在iOS webview加载时序和缓存问题总结中，写了相关不使用缓存的removeCache的iOS代码；

加载和使用缓存的结果如下：

1.此时在ios app的沙盒文件中将保存好已经缓存的文件，如果此时没有退出APP,那么缓存的内容同时也会保存在内存中；如下图(此处针对的UIWebView)：

2.此时可以看到这Caches文件中，后面的Paul.H5下面多了Cache.db的数据库，打开数据库可以看到以下内容；注意 此时的图片资源也是保存在Paul.H5下面的文件中；

2.1 已经请求过的连接地址表：