Native 与 UIWebView 通信 —— 实现查看大图方案（一）

背景

我们写资讯类的App经常会碰到的一个交互就是在详情页里面实现【查看大图】的功能。
但是大部分的详情页为了更好的排版都是通过用WebView来实现的，因为WebView和Native组件隔绝的缘故，导致我们实现【查看大图】功能是比较麻烦的，我们从图片的加载说起吧。

每次都要重新加载的图片

我们把详情页面的html套入到UIWebView中，产生一个详情页，里面有图片，如下图

很自然的，里面的图片是通过img标签的方式加载进来的，像下面这样：

<img src="address" />

OK，这里都没有问题，我们的交互通过一些工具，如JSBridge，在img标签上注册onclick事件，然后把src属性的值传入到native组件里，我们获取到这个图片的地址，再通过一些ViewController显示出来，最终结果就是这样：

一切看起来似乎很美好，但是这里有什么问题呢？对，如果我们单纯的把src传入到查看组件里，那么这个图片是要重新下载的。

同一张图片，在短时间内下载两次

这种事情你能忍？？？

解决方案

我们常用的查看网络上图片的组件是SDWebImage，它提供了很简单的 API，我们可以非常容易的在UIImageView上显示一个来自网络的图片。它不仅为UIImageView提供了一个Category，而且还给我们暴露了它内部缓存的相关接口：

我们可以自己把一些目前不需要显示的图片，先放进缓存里

神器啊！我只要拦截response，然后以url为key，数据为value，先缓存起来，在查看大图的时候，直接加载缓存内的图片，体验不就能上升好几个档次了么！好！开干！

从NSURLCache开始尝试

iOS提供了一个跟UIWebView缓存相关的拦截入口，从这里入手就好了！

- (void)storeCachedResponse:(NSCachedURLResponse *)cachedResponse forRequest:(NSURLRequest *)request {
    [super storeCachedResponse:cachedResponse forRequest:request];
    NSString *mimeType = cachedResponse.response.MIMEType;

    if ([mimeType hasPrefix:@"image"]) {
        NSString *url = request.URL.absoluteString;
        NSLog(@"cache url:%@", url);

        SDImageCache *cache = [SDImageCache sharedImageCache];
        [cache storeImage:[UIImage imageWithData:cachedResponse.data] forKey:url toDisk:NO];
    }

}

花了5分钟，直接把这段代码写下来，在AppDelegate中，注册了这个类。一个Command + R 喜滋滋的等结果。

点开详情页 -- 点开图片 -- 菊花出现在眼前

excuse me??? 一看日志

cache url: https://sfault-image.b0.upaiyun.com/xxxxxxxxxxxxxx

顿时想起来我司主站上的图片全部存在了某拍云上，所有的原始图片URL都会redirect到实际路径下面去。。。

后来我去研究了这个路径上的Request和Response 也没有一些Referer信息可以回溯到源地址。。好吧，只能从客户端请求上下手了。。。。

转移阵地 NSURLProtocol

那么，再祭出另一个神器 —— NSURLProtocol 它Hook了所有和NSURLSession有关的事件，看来比NSURLCache还狠啊~

#define kProtocolHandledKey @"SFProtocolHandledKey"

@interface SFURLProtocol()
@property (strong, nonatomic) NSURLSessionTask *sessionTask;
@end

@implementation SFURLProtocol {
}

+(void) enable {
    [NSURLProtocol registerClass:[SFURLProtocol class]];
}

+ (BOOL)canInitWithRequest:(NSURLRequest *)request {
    NSString *scheme = request.URL.scheme;
   
    //检查标示符，是否是我们处理过的请求，如果是处理过的，那么就交给系统去加载
    if ([NSURLProtocol propertyForKey:kProtocolHandledKey inRequest:request]) {
        return NO;
    }
    
    //只有scheme是http或者https的我们拦截下来
    return [scheme hasPrefix:@"http"];
}

+ (NSURLRequest *)canonicalRequestForRequest:(NSURLRequest *)request {
    return request;
}


+ (BOOL)requestIsCacheEquivalent:(NSURLRequest *)a toRequest:(NSURLRequest *)b {
    return [super requestIsCacheEquivalent:a toRequest:b];
}

- (void)startLoading {
    NSURLSession *session = [NSURLSession sharedSession];
    NSMutableURLRequest *request = [self.request mutableCopy];
    // 给我们处理过的请求设置一个标识符
    [NSURLProtocol setProperty:@(YES) forKey:kProtocolHandledKey inRequest:request];
    
    __weak typeof(self) weakSelf = self;
    
    self.sessionTask = [session dataTaskWithRequest:request completionHandler:^(NSData *data, NSURLResponse *response, NSError *error) {
        if (error) {
            return;
        }
        NSString *mimeType = response.MIMEType;
        if ([mimeType hasPrefix:@"image"]) {
            NSString *url = weakSelf.request.URL.absoluteString;
            SDImageCache *cache = [SDImageCache sharedImageCache];
            [cache storeImage:[UIImage imageWithData:data] forKey:url toDisk:NO];
        }
        
        [weakSelf.client URLProtocol:weakSelf didReceiveResponse:response cacheStoragePolicy:NSURLCacheStorageAllowedInMemoryOnly];
        [weakSelf.client URLProtocol:weakSelf didLoadData:data];
        [weakSelf.client URLProtocolDidFinishLoading:weakSelf];
    }];
    [self.task resume];
}

- (void)stopLoading {
    [self.sessionTask cancel];
    self.sessionTask = nil;
}

我们使用了自定义的NSURLProtocol对所有http(s)请求进行了拦截，并在资源加载完成的时候进行对mime-type的判断，如果是image/**，那我们就以请求的URL为key，把请求得到的数据转换为UIImage存入SDImageCache中。

再一次尝试，查看大图的时候就不需要再加载一次图片了，不仅省了流量，还省了等待图片加载的时间。