讓 UIWebview 擁有超強的圖片處理能力

kuailejim發表於2016-12-13
UIWebView

首先，最近有個想法是讓UIWebview支援webp，那麼原生的webview引擎是不支援的，所以就有了如標題所寫的想法。其實不僅僅侷限於為了讓其支援webp，如果能讓webview的圖片請求都走向自己實現的圖片庫，那麼可以實現很多很多黑科技（比如每個圖片加個app特定水印？或者說裁剪圖片使webview能有更好的效能表現？很多很多的功能，不一一列舉了）。

關於快取

在開始講解之前，我覺得有必要先普及一下 NSURLRequest cache 相關知識。
  • webview和普通的NSURLRequest都是用同一套cache策略麼，也就是說他們的cache共享嗎？
  • 具體的cache策略是怎樣的，是怎樣產生cache的？如果webview請求過一個圖片，而在webview外再次請求同一個圖片，會用直接用cache麼？
  • 系統原生提供的cache的穩定性？
帶著這幾個問題，我做了大量的實驗，這裡直接給出結果，因為這不是本文的重點。
  1. 兩者的確是公用cache的。
  2. 在實驗中，webview請求過一個圖片之後，用NSURLRequest請求同一個圖片會產生兩個結果。
    在前者請求完成後的短時間內直接進行下次請求，會重新請求而不會拿cache，而過一段時間後請求，則會拿cache，個人猜測是處理cache需要時間。
  3. 關於系統提供的cache，os隨時有可能清空你的app cache，這是不可靠的！這也是為什麼SDWebImage預設會有自己的一套快取策略的原因。

上述說的cache策略是建立在你正確理解並且用好的NSURLRequestCachePolicy的前提下的。為什麼這麼說呢？有些人會濫用NSURLRequestCachePolicy ，比如明明NSURLRequestReloadIgnoringLocalCacheData，卻說怎麼沒快取，這就有點蛋疼了。關於cache策略可以看看官方文件，比我說的清楚多了~

#總結下：
無論採用哪種NSURLRequestCachePolicy，在請求的時候都會cache。而在下次請求（不包括[webview reload]，重新整理會強制重新發請求）的時候，則會根據NSURLRequestCachePolicy的策略決定是否拿快取。如果是NSURLRequestUseProtocolCachePolicy，還要根據對應的協議（http\https\ftp）的服務端提供的response來決定。

OK 快取講完，我們來看重點。

其實思路挺簡單的，在之前介紹hybrid app的時候，已經介紹了NSURLProtocol這個神器的作用。這裡其實也是用NSURLProtocol來達到目的。
想一想，無非就是攔截掉webview的請求，將本身在webview的URL Load System的請求抽出來，我們自己處理掉，然後組裝成response返回給webview。對於webview而言是完全透明的，它不關心中途的網路請求是如何完成的，它只知道它發出了請求，並且收到response即可。
換句話說即我們自己處理整個請求的所有過程。
如下圖所示：

讓 UIWebview 擁有超強的圖片處理能力

簡簡單單看一下原理是很簡單，但是就是因為這小小的動作我們可以做到很多原本沒法讓webview做到的事情。

  • 支援webp
  • 實現與自己實現的圖片庫一致的快取策略
  • 將圖片大小尺寸的URL拼接策略放在本地

支援webp：將圖片請求在自己實現的圖片庫中完成，然後轉成webview支援的data格式透傳回去即可。

快取：我們都知道系統的快取是不可靠的，很多開發者會採用自己的快取策略，而webview的請求如果不進行干預是沒法做到走我們自己的快取策略的，但是如文章所說，即可做到。

圖片尺寸優化：往往對於H5而言，如果前端開發者沒有注意圖片尺寸問題，在PC和手機上圖片都採用一個尺寸的話，這是十分不好的，手機螢幕小並不需要這麼大尺寸的圖。往往大多數的圖片CDN都是會支援裁剪的，而攔截圖片請求在URL上拼接size是一個解決方式。

還有許許多多的功能，比如開頭提到的水印，從我這個app開啟的圖片都被我加上了本app的icon，是不是很屌。

這裡有個小插曲：在擼demo的時候，我本想讓demo中的SDWebImage請求同一個圖片，結果發現怎麼也走不到protocol中。搞了半天沒法只能去看文件，發現如下：

讓 UIWebview 擁有超強的圖片處理能力

NSURLSession與NSURLConnection註冊NSURLProtocol的方式是不同的！

demo下載地址

程式碼演示

+ (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 {
        // 這裡其實應該是圖片庫對於圖片請求的處理，每個人實現的圖片庫不一樣，所以我就直接以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 {
    // 假裝這是一個快取，這裡拋磚引玉下，大家可以自己實現自己的圖片快取策略
    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;
}複製程式碼

由於每個開發團隊可能有自己的圖片處理庫，所以我這裡就只給出簡單的思路，大家可以自行按照自己的圖片庫替代上述有註釋的程式碼。

成果演示

讓 UIWebview 擁有超強的圖片處理能力

讓 UIWebview 擁有超強的圖片處理能力

讓 UIWebview 擁有超強的圖片處理能力

可以很明顯的看出，圖片請求沒了，因為走了本地的快取。

最後

本文只給出瞭如何進行網路請求替換，並且給出一個小demo，其實能做的遠遠不止這些。正如文中所說webp，圖片尺寸優化等等，如果你感興趣也可以自己擼一個demo玩玩~

相關文章