yinxing29

iOS webView缓存，保证加载最新html

2018/05/14 Share

iOS webView缓存，保证加载最新html

[TOC]

前言

最近有个需求，修改webview（WKWebview）加载的缓存机制。因现在使用的缓存机制是NSURLRequestReturnCacheDataElseLoad(NSURLRequest的缓存机制下面会说到)。这个缓存机制就是只有当本地缓存不存在的时候才会请求，否则加载本地缓存，这样就导致当html有所修改的话，下次进入不能主动刷新网页，还是加载的缓存，需要手动刷新才能看到最新内容。现在的要求就是当：当html过期后（html有修改），在下次主动加载html的时候自动加载最新内容。

寻找解决方案

1. 查看NSURLRequest的API

既然之前使用了NSURLRequest的缓存机制，那么首先想到的就是看看有没有对应的缓存机制。

1
2
3
4
5
6
7
8
9
10
11
12
13
typedef NS_ENUM(NSUInteger, NSURLRequestCachePolicy)
{
    NSURLRequestUseProtocolCachePolicy = 0,//默认遵守http缓存策略

    NSURLRequestReloadIgnoringLocalCacheData = 1, //忽略本地缓存
    NSURLRequestReloadIgnoringLocalAndRemoteCacheData = 4, // Unimplemented //忽略本地和远程缓存
    NSURLRequestReloadIgnoringCacheData = NSURLRequestReloadIgnoringLocalCacheData,

    NSURLRequestReturnCacheDataElseLoad = 2,//只有当本地缓存不存在的时候才会请求，否则加载本地缓存
    NSURLRequestReturnCacheDataDontLoad = 3,//只加载本地缓存，没有缓存也不会请求

    NSURLRequestReloadRevalidatingCacheData = 5, // Unimplemented //判断缓存是否过期
};

忽略Unimplemented，可以看到NSURLRequestReloadRevalidatingCacheData不正是我们需要的缓存策略吗？当你高高兴兴的将缓存策略设置为NSURLRequestReloadRevalidatingCacheData后，然后加载html，然后修改html内容，发现确实会加载最新的。这个时候你一定会很高心，然而当你打印html加载时间的时候，你会发现html未修改的情况下和不加载缓存所用的时间都是一样的，其结论就是并没有加载缓存。这个时候你再看Unimplemented就会焕然大悟了。

所以通过修改NSURLRequest的缓存策略是无法实现该功能的，pass

2. 网上搜索webView的缓存加载策略

通过设置NSURLRequest的缓存机制无法达到我们的目的。没办法，只有找其他的方法了。
在查看了很多篇相关的技术博客后，终于找到了一个方法，就是设置ETag/If-None-Match和Last-Modified/If-Modified-Since来判断html内容是否有更新。其中If-None-Match和If-Modified-Since是设置在request headers请求头中，ETag和Last-Modified是response headers响应头中，由服务器返回的。

参数介绍

  • ETag：服务器验证令牌，文件内容hash。
  • Last-Modified：响应头标识了资源的最后修改时间。
  • If-None-Match：比较ETag是否一致。
  • If-Modified-Since：比较资源最后修改的时间是否一致。

关于html的缓存策略可以看看这篇博客，讲的很详细

基本实现原理

  1. 第一次请求某个html的时候，响应头response headers中返回ETag和Last-Modified（需要html做设置），将其记录下来。
  2. 后面每次请求时，在request headers请求头中设置If-None-Match和If-Modified-Since，其中If-None-Match就是记录的ETag值，If-Modified-Since就是记录的Last-Modified值。该值会和服务端的ETag和Last-Modified比较。如果相同则返回状态码304，说明没有更新，否则返回200，说明需要重新请求。

iOS实现方式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
NSURL *url = [NSURL URLWithString:@"http://172.17.124.102:8888/webViewTest.html"];
    NSMutableURLRequest *request = [[NSMutableURLRequest alloc] initWithURL:url cachePolicy:NSURLRequestReloadIgnoringCacheData timeoutInterval:10];
    //判断是否有更新，只请求responseHeader
    request.HTTPMethod = @"HEAD";
    //获取记录的response headers
    NSDictionary *cachedHeaders = [[NSUserDefaults standardUserDefaults] objectForKey:url.absoluteString];
    //设置request headers
    if (cachedHeaders) {
        NSString *etag = [cachedHeaders objectForKey:@"Etag"];
        if (etag) {
            [request setValue:etag forHTTPHeaderField:@"If-None-Match"];
        }
        NSString *lastModified = [cachedHeaders objectForKey:@"Last-Modified"];
        if (lastModified) {
            [request setValue:lastModified forHTTPHeaderField:@"If-Modified-Since"];
        }
    }
    
[[[NSURLSession sharedSession] dataTaskWithRequest:request completionHandler:^(NSData *data, NSURLResponse *response, NSError *error) {
        NSLog(@"======= %f",[[NSDate date] timeIntervalSince1970] * 1000);
        // 类型转换
        NSHTTPURLResponse *httpResponse = (NSHTTPURLResponse *)response;
        NSLog(@"statusCode == %@", @(httpResponse.statusCode));
        // 判断响应的状态码
        if (httpResponse.statusCode == 304 || httpResponse.statusCode == 0) {
            //如果状态码为304或者0(网络不通?)，则设置request的缓存策略为读取本地缓存
            [request setCachePolicy:NSURLRequestReturnCacheDataElseLoad];
        }else {
            //如果状态码为200，则保存本次的response headers，并设置request的缓存策略为忽略本地缓存，重新请求数据
            [[NSUserDefaults standardUserDefaults] setObject:httpResponse.allHeaderFields forKey:request.URL.absoluteString];
            //如果状态码为200，则设置request的缓存策略为忽略本地缓存
            [request setCachePolicy:NSURLRequestReloadIgnoringLocalCacheData];
        }
        
        //未更新的情况下读取缓存
        dispatch_async(dispatch_get_main_queue(), ^{
            //判断结束之后，修改请求方式，加载网页
            request.HTTPMethod = @"GET";
            [self.webView loadRequest:request];
        });
    }] resume];

在这里，我的实现方式是在每次请求加载之前，先获取html的response headers响应头（使用’HEAD’请求方式，只获取’response headers’，不获取页面），通过返回的状态码最终确定其缓存策略是读取本地缓存还是重新加载。最终达到了预期的效果。

最后

虽然通过这个方式实现了该功能，但是在实现过程中还是有一些东西没有弄懂。
比如：

  1. 在webView通过loadRequest加载html的时候，设置了request headers，然后在WKWebView的代理方法webView:didFinishNavigation:方法中获取的状态码永远是200，response headers响应头在修改了html内容后都没有变化，这里获取到的数据和通过NSURLSession获取到的有什么不同。
  2. 还有就是这种方式获取状态码及response headers响应头其实相当于在加载之前重新请求了一下。 使用HEAD请求可以避免网页的二次下载，只请求响应头数据，谢谢王洪亮ios的提醒。

不知道有没有更好的方法来实现该功能，欢迎讨论和指正。

参考博客

  1. http://imweb.io/topic/5795dcb6fb312541492eda8c
  2. https://blog.cnbluebox.com/blog/2015/05/07/architecture-ios-1/
  3. https://www.jianshu.com/p/ebcb0a1823be#comment-23319974

原文作者: yinxing29

原文链接: http://yinxing29.github.io/2018/05/14/iOS-webView缓存，保证加载最新html/

发表日期: May 14th 2018, 7:41:09

版权声明: 未经同意，禁止转载

CATALOG
  1. 1. iOS webView缓存，保证加载最新html
    1. 1.1. 前言
    2. 1.2. 寻找解决方案
      1. 1.2.0.1. 1. 查看NSURLRequest的API
      2. 1.2.0.2. 2. 网上搜索webView的缓存加载策略
  2. 1.3. 最后
  3. 1.4. 参考博客
Total : 4
2019
2018