WKWebView支持WebP图片 -- 解决 WKWebView 支持 webp 图片导致的BUG [NSURLProtocol、 Ajax POST ]

此文为了解决 WKWebView 使用 NSURLProtocol 协议支持 webp 格式图片所导致 ajax 发出POST请求body为空的BUG，body 为空意味着服务端获取不到前端页面的 POST 参数，导致请求失败。

问题描述

如果要让 WKWebView 强制支持 NSURLProtocol 协议，必须使用以下方式。

1. 新建一个 WKWebView 分类， 实现以下方法

- (void)registerScheme:(NSString *)scheme {
    if (!scheme.length) {
        return;
    }
    
    // 注册scheme
    // 获取 WebKit WKBrowsingContextController 实例
    Class cls = [[self valueForKey:@"browsingContextController"] class];
    SEL selector = NSSelectorFromString(@"registerSchemeForCustomProtocol:");
    if ([cls respondsToSelector:selector]) {
        // 以下方法类似：performSelector:withObject:
        IMP (*func)(id, SEL, id) = (void *)[cls methodForSelector:selector];
        func(cls, selector, scheme);       // 注册 Scheme
    }
}

2. 在 WKWebView 创建之后调用上面的方法

[webView registerScheme:@"http"];
[webView registerScheme:@"https"];

3. 注册自定义 NSURLProtocol 协议

// WebPURLProtocol 就是用于对 webp 图片进行重定向的协议
[NSURLProtocol registerClass:[WebPURLProtocol class]];

在 WebPURLProtocol 实现相应的 webp 判断和重定向逻辑之后即可加载 webp 图片，但是会出现文章开头提到的问题。

解决办法

ajax 发出的 GET 请求是没问题的，POST 请求 body 会丢失，是因为 webp 图片的链接也是 http 或者 https 开头的 Scheme，在上面我们为 WKWebView 支持 NSURLProtocol 协议注册了 http 和 https 协议，从而让 WKWebView 强制走我们自定义的 NSURLProtocol ，即使我们只对 webp 格式图片的链接做拦截进行重定向（正常的请求放过），但 ajax 发出POST请求还是 body 为空（原因请参考上一篇文章：https://www.jianshu.com/p/634d66e60400 ），如果我们去掉 http https 的注册，一切恢复正常，但舍弃了 webp 的功能。

为此想到了一个办法，那就是为 webp 格式图片自定义一个 scheme 单独处理（需要和前端后端约定这个 scheme），假定这个 scheme 就是 webphttp、webphttps

[webView registerScheme:@"webphttp"];   // 相当于 http
[webView registerScheme:@"webphttps"];  // 相当于 https

备注：前端或者后端只需要在图片链接前面拼接上 webp 标识即可， app 端只需在重定向的时候截取掉 webp 标识即可请求

然后在 WebPURLProtocol 中只针对 webphttp 和 webphttps 自定义 scheme 进行处理，具体实现细节代码如下：

#import "WebPURLProtocol.h"
#import 
#import 

NSString *const kWebPPrefix = @"webp";

@interface WebPURLProtocol ()
@property (strong, nonatomic) id  downloadOption;

@end

@implementation WebPURLProtocol

+ (BOOL)canInitWithRequest:(NSURLRequest *)request {
    // POST 不进行拦截
    if ([request.HTTPMethod isEqualToString:@"POST"]) {
        return NO;
    }
    
    if ([request.URL.scheme hasPrefix:kWebPPrefix]) {    // 如果是 webp 自定义图片协议
        if ([NSURLProtocol propertyForKey:@"URLProtocolHandledKey" inRequest:request]) {
            return NO;
        }
        
        return YES;
    }
    
    return NO;
}

+ (NSURLRequest *)canonicalRequestForRequest:(NSURLRequest *)request {
    if ([request.URL.scheme hasPrefix:kWebPPrefix]) {    // 如果是 webp 自定义图片协议
        NSMutableURLRequest *mRequest = [request mutableCopy];
        // 过滤自定义协议头
        NSMutableString *mUrl = [request.URL.absoluteString mutableCopy];
        NSRange r = [mUrl rangeOfString:kWebPPrefix];
        [mUrl deleteCharactersInRange:r];   // 删除 webp 前缀
        mRequest.URL = [NSURL URLWithString:[mUrl copy]];
        return [mRequest copy];
    }
    
    return request;
}

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

- (void)startLoading {
    // 重定向请求
    NSMutableURLRequest *mRequest = [[self request] mutableCopy];
    // 标识该request已经处理过了，防止无限循环
    [NSURLProtocol setProperty:@YES forKey:@"URLProtocolHandledKey" inRequest:mRequest];
    
    self.downloadOption = [[SDWebImageManager sharedManager] loadImageWithURL:[self request].URL options:0 progress:nil completed:^(UIImage * _Nullable image, NSData * _Nullable data, NSError * _Nullable error, SDImageCacheType cacheType, BOOL finished, NSURL * _Nullable imageURL) {
        // 通知 client 收到响应
        NSURLResponse *response = [[NSURLResponse alloc] initWithURL:mRequest.URL MIMEType:@"image/jpeg" expectedContentLength:data.length textEncodingName:nil];
        [self.client URLProtocol:self didReceiveResponse:response cacheStoragePolicy:NSURLCacheStorageAllowed];
        // 通知 client 已经加载完数据
        [self.client URLProtocol:self didLoadData:UIImageJPEGRepresentation(image, 1.0f)];
        // 通知 client 请求完成, 成功或者失败的处理
        if (!error) {
            //成功
            [self.client URLProtocolDidFinishLoading:self];
        } else {
            //失败
            [self.client URLProtocol:self didFailWithError:error];
        }
    }];
}

- (void)stopLoading {
    // 终止任务
    if ([self.downloadOption conformsToProtocol:@protocol(SDWebImageOperation)]) {
        [self.downloadOption cancel];
    }
}

@end

以上方式即可完美解决 ajax POST 请求的问题（需要服务端和前端配合），如果你觉得不好，欢迎指出。

注意：此方式不适合使用 NSURLProtocol 做 WKWebView 防 DNS 劫持的功能，因为普通请求都是 http 和 https，所以会出现文章开头说的问题。