移動端應(yīng)用往往有大量的圖片展示場景，圖片的大小對企業(yè)至關(guān)重要。WebP 作為一種更高效的圖片編碼格式，平均大小比 PNG/JPG/ GIF/動態(tài) GIF格式減少 70%（對比測試頁面），且質(zhì)量沒有明顯的差別，是其他圖片格式極佳的替代者。
一、MagicWebViewWebP.framework架構(gòu)
| 主要文件 | 說明 |
|---|---|
| MagicWebViewWebPManager | （引用文件）管理MagicURLProtocol的注冊、銷毀MagicURLProtocol |
| MagicURLProtocol | 繼承NSURLProtocol用于截獲url |
| NSURLProtocol+MagicWebView | 擴展NSURLProtocol用于注冊、銷毀Scheme |
| 依賴 | 說明 |
|---|---|
| SDWebImage | 使用了webP相關(guān)部分模塊 |
| libwebp | webP依賴文件 |
二、說明
MagicURLProtocol
MagicURLProtocol繼承于
NSURLProtocol，實現(xiàn)了對webp圖片網(wǎng)絡(luò)請求進行攔截，將攔截的請求使用NSURLConnection(也可以使用NSURLSession)加載數(shù)據(jù)，然后利用SDWebImage中UIImage+WebP提供加載webp圖片的能力，并將加載好的UIImage轉(zhuǎn)化為NSData返回，實現(xiàn)webp圖片的加載。
1、NSURLProtocol主要步驟？
注冊—>攔截—>轉(zhuǎn)發(fā)—>回調(diào)—>結(jié)束
2、繼承NSURLProtocol必須實現(xiàn)的方法？
+ (BOOL)canInitWithRequest:(NSURLRequest *)request;
+ (NSURLRequest *)canonicalRequestForRequest:(NSURLRequest *)request;
- (void)startLoading;
- (void)stopLoading;
3、什么是NSURLProtocol？
NSURLProtocol作為URL Loading System中的一個獨立部分存在，能夠攔截所有的URL Loading System發(fā)出的網(wǎng)絡(luò)請求，攔截之后便可根據(jù)需要做各種自定義處理，是iOS網(wǎng)絡(luò)層實現(xiàn)AOP(面向切面編程)的終極利器，所以功能和影響力都是非常強大的。
URL Loading System的圖
1.NSURLProtocol可以攔截的網(wǎng)絡(luò)請求包括NSURLSession，NSURLConnection以及UIWebVIew。
2.基于CFNetwork的網(wǎng)絡(luò)請求，以及WKWebView的請求是無法攔截的。
3.現(xiàn)在主流的iOS網(wǎng)絡(luò)庫，例如AFNetworking，Alamofire等網(wǎng)絡(luò)庫都是基于NSURLSession或NSURLConnection的，所以這些網(wǎng)絡(luò)庫的網(wǎng)絡(luò)請求都可以被NSURLProtocol所攔截。
//MagicURLProtocol.h
#import <Foundation/Foundation.h>
@interface MagicURLProtocol : NSURLProtocol
@end
//MagicURLProtocol.m
#import "MagicURLProtocol.h"
#ifdef SD_WEBP
#import "UIImage+WebP.h"
#endif
static NSString *const MagicURLProtocolKey = @"MagicURLProtocol-already-handled";
@interface MagicURLProtocol()<NSURLConnectionDataDelegate>
@property (strong, nonatomic) NSURLConnection *connection;
@property (strong, nonatomic) NSMutableData *recData;
@end
@implementation MagicURLProtocol
- (void)dealloc{
self.recData = nil;
}
/**
判斷是否啟用SD_WEBP 并且圖片格式為webp 如果為YES 則標(biāo)記請求需要自行處理并且防止無限循環(huán) 為NO則不處理
Build Settings -- Preprocessor Macros, 添加 SD_WEBP=1
*/
+ (BOOL)canInitWithRequest:(NSURLRequest *)request {
BOOL useCustomUrlProtocol = NO;
NSString *urlString = request.URL.absoluteString;
if (!SD_WEBP || ([urlString.pathExtension compare:@"webp"] != NSOrderedSame)) {
useCustomUrlProtocol = NO;
}else {
if ([NSURLProtocol propertyForKey:MagicURLProtocolKey inRequest:request] == nil) {
useCustomUrlProtocol = YES;
}else {
useCustomUrlProtocol = NO;
}
}
return useCustomUrlProtocol;
}
+ (NSURLRequest *)canonicalRequestForRequest:(NSURLRequest *)request {
return request;
}
// 將截獲的請求使用NSURLConnection | NSURLSession 獲取數(shù)據(jù)
// (此處使用NSURLConnection)
- (void)startLoading{
NSMutableURLRequest *newRequest = [self cloneRequest:self.request];
//NSString *urlString = newRequest.URL.absoluteString;
//NSLog(@"######截獲WebP url:%@",urlString);
[NSURLProtocol setProperty:@YES forKey:MagicURLProtocolKey inRequest:newRequest];
[self sendRequest:newRequest];
}
- (void)stopLoading{
if (self.connection) {
[self.connection cancel];
}
self.connection = nil;
}
#pragma mark - dataDelegate
//復(fù)制Request對象
- (NSMutableURLRequest *)cloneRequest:(NSURLRequest *)request{
NSMutableURLRequest *newRequest = [NSMutableURLRequest requestWithURL:request.URL cachePolicy:request.cachePolicy timeoutInterval:request.timeoutInterval];
newRequest.allHTTPHeaderFields = request.allHTTPHeaderFields;
[newRequest setValue:@"image/webp,image/*;q=0.8" forHTTPHeaderField:@"Accept"];
if (request.HTTPMethod) {
newRequest.HTTPMethod = request.HTTPMethod;
}
if (request.HTTPBodyStream) {
newRequest.HTTPBodyStream = request.HTTPBodyStream;
}
if (request.HTTPBody) {
newRequest.HTTPBody = request.HTTPBody;
}
newRequest.HTTPShouldUsePipelining = request.HTTPShouldUsePipelining;
newRequest.mainDocumentURL = request.mainDocumentURL;
newRequest.networkServiceType = request.networkServiceType;
return newRequest;
}
#pragma mark - 網(wǎng)絡(luò)請求
- (void)sendRequest:(NSURLRequest *)request{
self.connection = [[NSURLConnection alloc] initWithRequest:request delegate:self];
}
#pragma mark - NSURLConnectionDataDelegate
/**
* 收到服務(wù)器響應(yīng)
*/
- (void)connection:(NSURLConnection *)connection didReceiveResponse:(NSURLResponse *)response{
NSURLResponse *returnResponse = response;
[self.client URLProtocol:self didReceiveResponse:returnResponse cacheStoragePolicy:NSURLCacheStorageAllowed];
}
/**
* 接收數(shù)據(jù)
*/
- (void)connection:(NSURLConnection *)connection didReceiveData:(NSData *)data{
if (!self.recData) {
self.recData = [NSMutableData new];
}
if (data) {
[self.recData appendData:data];
}
}
/**
* 重定向
*/
- (nullable NSURLRequest *)connection:(NSURLConnection *)connection willSendRequest:(NSURLRequest *)request redirectResponse:(nullable NSURLResponse *)response{
if (response) {
[self.client URLProtocol:self wasRedirectedToRequest:request redirectResponse:response];
}
return request;
}
/**
* 加載完畢
*/
- (void)connectionDidFinishLoading:(NSURLConnection *)connection{
NSData *imageData = self.recData;
#ifdef SD_WEBP
UIImage *image = [UIImage sd_imageWithWebPData:self.recData];
imageData = UIImagePNGRepresentation(image);
if (!imageData) {
imageData = UIImageJPEGRepresentation(image, 1);
}
#endif
[self.client URLProtocol:self didLoadData:imageData];
[self.client URLProtocolDidFinishLoading:self];
}
/**
* 加載失敗
*/
- (void)connection:(NSURLConnection *)connection didFailWithError:(NSError *)error{
[self.client URLProtocol:self didFailWithError:error];
}
@end
MagicWebViewWebPManager
MagicWebViewWebPManager封裝了支持UIWebView、WKWebView注冊和銷毀MagicURLProtocol。
特別注意：NSURLProtocol 一旦被注冊將會使整個app的request請求都會被攔截，進入Web時注冊，退出Web取消注冊。在使用的時候需要特別注意。
//MagicWebViewWebPManager.h
#import <Foundation/Foundation.h>
@interface MagicWebViewWebPManager : NSObject
+ (MagicWebViewWebPManager *)shareManager;
- (void)registerMagicURLProtocolWebView:(id)webView; //注冊 MagicURLProtocol
- (void)unregisterMagicURLProtocolWebView:(id)webView; //銷毀 MagicURLProtocol
@end
//MagicWebViewWebPManager.m
#import "MagicWebViewWebPManager.h"
#import "NSURLProtocol+MagicWebView.h"
#import <WebKit/WebKit.h>
static NSString *const MagicURLProtocol_String = @"MagicURLProtocol";
@implementation MagicWebViewWebPManager
+ (MagicWebViewWebPManager *)shareManager{
static MagicWebViewWebPManager *manger;
static dispatch_once_t onceToken;
dispatch_once(&onceToken, ^{
manger = [[MagicWebViewWebPManager alloc] init];
});
return manger;
}
#pragma mark - WebView支持webP
// NSURLProtocol 一旦被注冊將會使整個App的request請求都會被攔截,進入Web時注冊,退出Web取消注冊
/**
注冊 MagicURLProtocol
*/
- (void)registerMagicURLProtocolWebView:(id)webView{
if ([webView isKindOfClass:[WKWebView class]]) {
[NSURLProtocol registerClass:NSClassFromString(MagicURLProtocol_String)];
[NSURLProtocol wk_registerScheme:@"http"];
[NSURLProtocol wk_registerScheme:@"https"];
}
if ([webView isKindOfClass:[UIWebView class]]){
[NSURLProtocol registerClass:NSClassFromString(MagicURLProtocol_String)];
}
}
/**
銷毀 MagicURLProtocol
*/
- (void)unregisterMagicURLProtocolWebView:(id)webView{
if ([webView isKindOfClass:[WKWebView class]]) {
[NSURLProtocol unregisterClass:NSClassFromString(MagicURLProtocol_String)];
[NSURLProtocol wk_unregisterScheme:@"http"];
[NSURLProtocol wk_unregisterScheme:@"https"];
}
if ([webView isKindOfClass:[UIWebView class]]){
[NSURLProtocol unregisterClass:NSClassFromString(MagicURLProtocol_String)];
}
}
@end
NSURLProtocol+MagicWebView
NSURLProtocol+MagicWebView用于提供WKWebView對NSURLProtocol的支持能力。
UIWebView默認(rèn)支持NSURLProtocol，如果需要WKWebView也支持NSURLProtocol，則需要擴展，具體代碼如下。
//NSURLProtocol+MagicWebView.h
#import <Foundation/Foundation.h>
@interface NSURLProtocol (MagicWebView)
+ (void)wk_registerScheme:(NSString *)scheme; //注冊協(xié)議
+ (void)wk_unregisterScheme:(NSString *)scheme; //注銷協(xié)議
@end
//NSURLProtocol+MagicWebView.m
#import "NSURLProtocol+MagicWebView.h"
#import <WebKit/WebKit.h>
FOUNDATION_STATIC_INLINE Class ContextControllerClass() {
static Class cls;
if (!cls) {
cls = [[[WKWebView new] valueForKey:@"browsingContextController"] class];
}
return cls;
}
FOUNDATION_STATIC_INLINE SEL RegisterSchemeSelector() {
return NSSelectorFromString(@"registerSchemeForCustomProtocol:");
}
FOUNDATION_STATIC_INLINE SEL UnregisterSchemeSelector() {
return NSSelectorFromString(@"unregisterSchemeForCustomProtocol:");
}
@implementation NSURLProtocol (MagicWebView)
+ (void)wk_registerScheme:(NSString *)scheme {
Class cls = ContextControllerClass();
SEL sel = RegisterSchemeSelector();
if ([(id)cls respondsToSelector:sel]) {
#pragma clang diagnostic push
#pragma clang diagnostic ignored "-Warc-performSelector-leaks"
[(id)cls performSelector:sel withObject:scheme];
#pragma clang diagnostic pop
}
}
+ (void)wk_unregisterScheme:(NSString *)scheme {
Class cls = ContextControllerClass();
SEL sel = UnregisterSchemeSelector();
if ([(id)cls respondsToSelector:sel]) {
#pragma clang diagnostic push
#pragma clang diagnostic ignored "-Warc-performSelector-leaks"
[(id)cls performSelector:sel withObject:scheme];
#pragma clang diagnostic pop
}
}
@end
三、使用
1、將MagicWebViewWebP.framework導(dǎo)入工程。
2、引入頭文件。
#import <MagicWebViewWebP/MagicWebViewWebPManager.h>
3、webView加載請求之前，注冊MagicURLProtocol。
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view.
// 注冊協(xié)議支持webP
[[MagicWebViewWebPManager shareManager] registerMagicURLProtocolWebView:self.wkWebView];
// 加載請求
NSURLRequest *request = [NSURLRequest requestWithURL:[NSURL URLWithString:_requestURLString]];
[self.wkWebView loadRequest:request];
}
4、dealloc中銷毀MagicURLProtocol。
若有特殊需求，需要在web頁面退出時銷毀MagicURLProtocol，否則會攔截整個app的網(wǎng)絡(luò)請求。
// 銷毀
-(void)dealloc{
[[MagicWebViewWebPManager shareManager] unregisterMagicURLProtocolWebView:self.wkWebView];
}
5、可以加載http://isparta.github.io/compare-webp/index.html#12345來檢測webP顯示效果。
三、開源地址
MagicWebViewWebP.framework已經(jīng)開源，喜歡的小伙伴兒可以Star。??????????
