背景
我们写资讯类的App经常会碰到的一个交互就是在详情页里面实现【查看大图】的功能。
但是大部分的详情页为了更好的排版都是通过用WebView来实现的，因为WebView和Native组件隔绝的缘故，导致我们实现【查看大图】功能是比较麻烦的，我们从图片的加载说起吧。
每次都要重新加载的图片
我们把详情页面的html套入到UIWebView中，产生一个详情页，里面有图片，如下图
很自然的，里面的图片是通过img标签的方式加载进来的，像下面这样：
<img src ="xxx" />
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中。
再一次尝试，查看大图的时候就不需要再加载一次图片了，不仅省了流量，还省了等待图片加载的时间。
