首先，最近有個想法是讓UIWebview支持webp铲掐，那么原生的webview引擎是不支持的譬猫，所以就有了如標(biāo)題所寫的想法讯檐。其實不僅僅局限于為了讓其支持webp，如果能讓webview的圖片請求都走向自己實現(xiàn)的圖片庫删窒，那么可以實現(xiàn)很多很多黑科技（比如每個圖片加個app特定水恿芽选？或者說裁剪圖片使webview能有更好的性能表現(xiàn)肌索？很多很多的功能蕉拢，不一一列舉了）。
關(guān)于緩存
在開始講解之前诚亚，我覺得有必要先普及一下 NSURLRequest cache 相關(guān)知識晕换。
- webview和普通的NSURLRequest都是用同一套cache策略么，也就是說他們的cache共享嗎站宗？
- 具體的cache策略是怎樣的闸准，是怎樣產(chǎn)生cache的？如果webview請求過一個圖片梢灭，而在webview外再次請求同一個圖片夷家，會用直接用cache么蒸其？
- 系統(tǒng)原生提供的cache的穩(wěn)定性茵汰？
帶著這幾個問題番捂，我做了大量的實驗，這里直接給出結(jié)果庇忌，因為這不是本文的重點义屏。
- 兩者的確是公用cache的靠汁。
- 在實驗中，webview請求過一個圖片之后闽铐，用NSURLRequest請求同一個圖片會產(chǎn)生兩個結(jié)果蝶怔。
在前者請求完成后的短時間內(nèi)直接進(jìn)行下次請求，會重新請求而不會拿cache兄墅，而過一段時間后請求踢星，則會拿cache，個人猜測是處理cache需要時間隙咸。 - 關(guān)于系統(tǒng)提供的cache斩狱，os隨時有可能清空你的app cache，這是不可靠的扎瓶！這也是為什么SDWebImage默認(rèn)會有自己的一套緩存策略的原因。
上述說的cache策略是建立在你正確理解并且用好的NSURLRequestCachePolicy的前提下的泌枪。為什么這么說呢概荷？有些人會濫用NSURLRequestCachePolicy ，比如明明NSURLRequestReloadIgnoringLocalCacheData碌燕，卻說怎么沒緩存误证，這就有點蛋疼了。關(guān)于cache策略可以看看官方文檔修壕，比我說的清楚多了~
總結(jié)下：
無論采用哪種NSURLRequestCachePolicy愈捅，在請求的時候都會cache。而在下次請求（不包括[webview reload]慈鸠，刷新會強(qiáng)制重新發(fā)請求）的時候蓝谨，則會根據(jù)NSURLRequestCachePolicy的策略決定是否拿緩存。如果是NSURLRequestUseProtocolCachePolicy青团，還要根據(jù)對應(yīng)的協(xié)議（http\https\ftp）的服務(wù)端提供的response來決定譬巫。
OK 緩存講完，我們來看重點督笆。
其實思路挺簡單的芦昔，在之前介紹hybrid app的時候，已經(jīng)介紹了NSURLProtocol這個神器的作用娃肿。這里其實也是用NSURLProtocol來達(dá)到目的咕缎。
想一想珠十，無非就是攔截掉webview的請求，將本身在webview的URL Load System的請求抽出來凭豪，我們自己處理掉焙蹭，然后組裝成response返回給webview。對于webview而言是完全透明的墅诡，它不關(guān)心中途的網(wǎng)絡(luò)請求是如何完成的壳嚎，它只知道它發(fā)出了請求，并且收到response即可末早。
換句話說即我們自己處理整個請求的所有過程烟馅。
如下圖所示：
簡簡單單看一下原理是很簡單，但是就是因為這小小的動作我們可以做到很多原本沒法讓webview做到的事情然磷。
- 支持webp
- 實現(xiàn)與自己實現(xiàn)的圖片庫一致的緩存策略
- 將圖片大小尺寸的URL拼接策略放在本地
支持webp：將圖片請求在自己實現(xiàn)的圖片庫中完成郑趁，然后轉(zhuǎn)成webview支持的data格式透傳回去即可。
緩存：我們都知道系統(tǒng)的緩存是不可靠的姿搜，很多開發(fā)者會采用自己的緩存策略寡润，而webview的請求如果不進(jìn)行干預(yù)是沒法做到走我們自己的緩存策略的，但是如文章所說舅柜，即可做到梭纹。
圖片尺寸優(yōu)化：往往對于H5而言，如果前端開發(fā)者沒有注意圖片尺寸問題致份，在PC和手機(jī)上圖片都采用一個尺寸的話变抽，這是十分不好的，手機(jī)屏幕小并不需要這么大尺寸的圖氮块。往往大多數(shù)的圖片CDN都是會支持裁剪的绍载，而攔截圖片請求在URL上拼接size是一個解決方式。
還有許許多多的功能滔蝉，比如開頭提到的水印击儡，從我這個app打開的圖片都被我加上了本app的icon，是不是很屌蝠引。
這里有個小插曲：在擼demo的時候阳谍，我本想讓demo中的SDWebImage請求同一個圖片，結(jié)果發(fā)現(xiàn)怎么也走不到protocol中立肘。搞了半天沒法只能去看文檔边坤，發(fā)現(xiàn)如下：
NSURLSession與NSURLConnection注冊NSURLProtocol的方式是不同的！
代碼演示
+ (BOOL)canInitWithRequest:(NSURLRequest *)request {
NSString *path = request.URL.path;
// 只處理是圖片的URL請求
if ([path hasSuffix:@".jpg"] || [path hasSuffix:@".jpeg"] || [path hasSuffix:@".webp"]) {
if ([NSURLProtocol propertyForKey:WebviewImageProtocolHandledKey inRequest:request]) {
return NO;
}
return YES;
}
return NO;
}
+ (NSURLRequest *)canonicalRequestForRequest:(NSURLRequest *)request {
return request;
}
- (void)startLoading {
// 將本地的緩存組裝成報文傳回去
NSData *data = [self imageDataWithURL:self.request.URL];
if (data) {
NSString *mimeType = @"image/jpeg";
NSMutableDictionary *header = [[NSMutableDictionary alloc] initWithCapacity:2];
NSString *contentType = [mimeType stringByAppendingString:@";charset=UTF-8"];
header[@"Content-Type"] = contentType;
header[@"Content-Length"] = [NSString stringWithFormat:@"%lu", (unsigned long) data.length];
NSHTTPURLResponse *httpResponse = [[NSHTTPURLResponse alloc] initWithURL:self.request.URL
statusCode:200
HTTPVersion:@"1.1"
headerFields:header];
[self.client URLProtocol:self didReceiveResponse:httpResponse cacheStoragePolicy:NSURLCacheStorageNotAllowed];
[self.client URLProtocol:self didLoadData:data];
[self.client URLProtocolDidFinishLoading:self];
} else {
// 這里其實應(yīng)該是圖片庫對于圖片請求的處理谅年，每個人實現(xiàn)的圖片庫不一樣茧痒，所以我就直接以webview的方式請求了
NSMutableURLRequest *newRequest = [self.request mutableCopy];
newRequest.allHTTPHeaderFields = self.request.allHTTPHeaderFields;
[NSURLProtocol setProperty:@YES forKey:WebviewImageProtocolHandledKey inRequest:newRequest];
self.connection = [NSURLConnection connectionWithRequest:newRequest delegate:self];
}
}
- (void)stopLoading {
[self.connection cancel];
}
- (NSData*)imageDataWithURL:(NSURL*)url {
// 假裝這是一個緩存，這里拋磚引玉下融蹂，大家可以自己實現(xiàn)自己的圖片緩存策略
if ([url.absoluteString isEqualToString:@"http://kuailejim.com/images/background-cover.jpg"]) {
NSString *filePath = [[NSBundle mainBundle] pathForResource:@"background-cover" ofType:@"jpg"];
NSData *data = [NSData dataWithContentsOfFile:filePath];
return data;
}
return nil;
}
由于每個開發(fā)團(tuán)隊可能有自己的圖片處理庫旺订，所以我這里就只給出簡單的思路弄企，大家可以自行按照自己的圖片庫替代上述有注釋的代碼。
成果演示
可以很明顯的看出区拳，圖片請求沒了拘领，因為走了本地的緩存。
最后
本文只給出了如何進(jìn)行網(wǎng)絡(luò)請求替換樱调，并且給出一個小demo约素，其實能做的遠(yuǎn)遠(yuǎn)不止這些。正如文中所說webp笆凌，圖片尺寸優(yōu)化等等圣猎，如果你感興趣也可以自己擼一個demo玩玩~
