Flutter下实现WebView拦截加载离线资源

在用移动设备加载H5页面时，一些公共资源如css，js，图片等如果比较大时，就需要通过拦截网络，改从本地资源加载。在Android原生WebView中，我们可以在WebViewClient中的shouldInterceptRequest方法来拦截替换资源。
然而在Flutter中的WebView插件，不管是官方的webview_flutter,还是flutter_webview_plugin都不支持加载本地资源。
庆幸的是webview_flutter底层实现是基于WebView(Android)和WKWebView(iOS)。只要在官方webview_flutter上稍作修改，就可以实现离线资源加载。

项目地址

github: https://github.com/iamyours/webview_flutter
pub: iwebview_flutter

Android端实现

首先我们从webview_flutter中下载最新Archive(当前使用0.3.15+1)。
解压后，使用AndroidStudio打开，右键工程目录，使用Android模式打开

Android模式

如果要实现WebView请求拦截，就必须给webView设置WebViewCilent，全局搜索setWebViewClient找到只有一处实现:

//FlutterWebView.java
private void applySettings(Map settings) {
    for (String key : settings.keySet()) {
        switch (key) {
            ...
            case "hasNavigationDelegate":
                final boolean hasNavigationDelegate = (boolean) settings.get(key);

                final WebViewClient webViewClient =
                        flutterWebViewClient.createWebViewClient(hasNavigationDelegate);

                webView.setWebViewClient(webViewClient);
                break;
            ...
        }
    }
}

修改WebViewClient

通过以上代码我们知道具体逻辑在createWebViewClient方法中：

WebViewClient createWebViewClient(boolean hasNavigationDelegate) {
    this.hasNavigationDelegate = hasNavigationDelegate;

    if (!hasNavigationDelegate || android.os.Build.VERSION.SDK_INT >= Build.VERSION_CODES.N) {
        return internalCreateWebViewClient();
    }

    return internalCreateWebViewClientCompat();
}

然后在internalCreateWebViewClient和internalCreateWebViewClientCompat添加shouldInterceptRequest方法，然后参照onPageFinished在FlutterWebViewClient加入shouldInterceptRequest方法：

private WebViewClient internalCreateWebViewClient() {
    return new WebViewClient() {
        ...
        @Override
        public void onPageFinished(WebView view, String url) {
            FlutterWebViewClient.this.onPageFinished(view, url);
        }

        ...//参照
        @Override
        public WebResourceResponse shouldInterceptRequest(WebView view, String url) {
            WebResourceResponse response = FlutterWebViewClient.this.shouldInterceptRequest(view, url);
            if (response != null) return response;
            return super.shouldInterceptRequest(view, url);
        }
    };
}

异步变同步，MethodChannel接收Flutter层数据

我们在shouldInterceptRequest中接收来自Flutter世界的数据，如assets中的二进制数据。但是要注意的是通过MethodChannel接收数据是通过异步回调的形式，但是shouldInterceptRequest方法需要同步接收数据，因此需要一个异步变同步的执行器，同时MethodChannel调用必须在主线呈调用。方法有很多，我这里通过CountDownLatch实现。

public class SyncExecutor {
    private final CountDownLatch countDownLatch = new CountDownLatch(1);
    Handler mainHandler = new Handler(Looper.getMainLooper());
    WebResourceResponse res = null;
    public WebResourceResponse getResponse(final MethodChannel methodChannel, final String url) {
        res = null;
        mainHandler.post(new Runnable() {
            @Override
            public void run() {
                methodChannel.invokeMethod("shouldInterceptRequest", url, new MethodChannel.Result() {
                    @Override
                    public void success(Object o) {
                        if (o instanceof Map) {
                            Map map = (Map) o;
                            byte[] bytes = (byte[]) map.get("data");
                            String type = (String) map.get("mineType");
                            String encode = (String) map.get("encoding");
                            res = new WebResourceResponse(type, encode, new ByteArrayInputStream(bytes));
                        }
                        countDownLatch.countDown();
                    }

                    @Override
                    public void error(String s, String s1, Object o) {
                        res = null;
                        countDownLatch.countDown();
                    }
                    @Override
                    public void notImplemented() {
                        res = null;
                        countDownLatch.countDown();
                    }
                });
            }
        });
        try {
            countDownLatch.await();
        } catch (InterruptedException e) {
            e.printStackTrace();
        }
        return res;
    }
}

注意到这里success中接收到Map数据，我们会在接下来Flutter层传过来。

Flutter层传递数据

在webview_method_channel.dart中我们找到了onPageFinished接收来自Android或iOS的调用。参照onPageFinished方法，我们加入shouldInterceptRequest方法，同样的在_platformCallbacksHandler对应的类中加入shouldInterceptRequest方法。依次向上层类推。

Future _onMethodCall(MethodCall call) async {
    switch (call.method) {
      
      case 'onPageFinished':
        _platformCallbacksHandler.onPageFinished(call.arguments['url']);
        return null;
      case 'shouldInterceptRequest':
        String url = call.arguments;
        var response = await _platformCallbacksHandler.shouldInterceptRequest(url);
        if (response != null) {
          return {"data": response.data, "mineType": response.mineType, "encoding": response.encoding};
        }
        return null;
    }

//webview_method_channel.dart
abstract class WebViewPlatformCallbacksHandler {
  ...
  void onPageFinished(String url);

  /// iamyours:Invoked by [WebViewPlatformController] when a request url intercepted.
  Future shouldInterceptRequest(String url);
}

//webview_method_channel.dart
class Response {
  final String mineType;
  final String encoding;
  final Uint8List data;

  Response(this.mineType, this.encoding, this.data);
}

typedef void PageFinishedCallback(String url);

/// iamyours Signature for when a [WebView] interceptRequest .
typedef Future ShouldInterceptRequestCallback(String url);

class WebView extends StatefulWidget {
  ...
  const WebView({
    ...
    this.onPageFinished,
    this.shouldInterceptRequest,
    ...,
  })

class _WebViewState extends State {
    ...
    @override
  void onPageFinished(String url) {
    if (_widget.onPageFinished != null) {
      _widget.onPageFinished(url);
    }
  }
    ...
  @override
  Future shouldInterceptRequest(String url) async{
    if (_widget.shouldInterceptRequest != null) {
      return _widget.shouldInterceptRequest(url);
    }
    return null;
  }
}

然后我们在example中实现一个简单的logo替换效果

WebView(
  initialUrl: "https://wap.sogou.com/",
  javascriptMode: JavascriptMode.unrestricted,
  debuggingEnabled: true,
  onProgressChanged: (int p){
    setState(() {
      progress = p/100.0;
    });
  },
  backgroundColor: Colors.red,
  shouldInterceptRequest: (String url) async {//替换搜狗搜索logo为baidu
    var googleLogo = "https://wap.sogou.com/resource/static/index/images/logo_new.6f31942.png";
    print("============url:$url");
    if (url == googleLogo) {
      ByteData data = await rootBundle.load("assets/baidu.png");
      Uint8List bytes = Uint8List.view(data.buffer);
      return Response("image/png", null, bytes);
    }
    return null;
  },
),

最终效果

搜狗搜索logo替换

iOS端实现

NSURLProtocol拦截请求

webview_flutteriOS端是基于WKWebview实现的，拦截请求通过NSURLProtocol实现,可以参照iOS WKWebView (NSURLProtocol)拦截js、css，图片资源一文。此法拦截是全局拦截的，所以需要一个全局变量存储所有的FlutterMethodChannel,这里定义一个单例存储这些数据。

//FlutterInstance.h
#import 
#import 
NS_ASSUME_NONNULL_BEGIN

@interface FlutterInstance : NSObject
@property(nonatomic,retain)NSMutableDictionary *channels;
+(FlutterInstance*)get;
+(FlutterMethodChannel*)channelWithAgent:(NSString*)agent;
+(void)removeChannel:(int64_t)viewId;
@end

NS_ASSUME_NONNULL_END

这里为了区分对应的请求是在哪个channel下的，我们在给相应的WKWebview的agent最后加入#_viewId

//
//  FlutterInstance.m

#import "FlutterInstance.h"

@implementation FlutterInstance

static FlutterInstance *instance = nil;
+(FlutterInstance *)get
{
    @synchronized(self)
    {
        if(instance==nil)
        {
            instance= [FlutterInstance new];
            instance.channels = [NSMutableDictionary dictionary];
        }
    }
    return instance;
}
+(FlutterMethodChannel*)channelWithAgent:(NSString*)agent{
    NSRange range = [agent rangeOfString:@"#" options:NSBackwardsSearch];
    NSLog(@"range:%d,%d",range.length,range.location);
    NSString *key = [agent substringFromIndex:range.location+1];
    NSDictionary *channels = [self get].channels;
    FlutterMethodChannel *channel = (FlutterMethodChannel*)[channels objectForKey:key];
    return channel;
}
+(void)removeChannel:(int64_t)viewId{
    NSMutableDictionary *channels = [self get].channels;
    NSString *key = [NSString stringWithFormat:@"%lld",viewId];
    [channels removeObjectForKey:key];
}
@end

userAgent区分MethodChannel

我们在WKWebview的loadUrl中修改userAgent区分各个WebView对应的viewId。

//FlutterWebView.m
- (bool)loadUrl:(NSString*)url withHeaders:(NSDictionary*)headers {
  NSURL* nsUrl = [NSURL URLWithString:url];
  if (!nsUrl) {
    return false;
  }
  NSMutableURLRequest* request = [NSMutableURLRequest requestWithURL:nsUrl];
    NSString *vid = [NSString stringWithFormat:@"%lld",_viewId];
    [_webView evaluateJavaScript:@"navigator.userAgent" completionHandler:^(id result, NSError *error) {
        NSString *fixAgent = [NSString stringWithFormat:@"%@#%d",result,_viewId];
        [_webView setCustomUserAgent:fixAgent];
    }];
  [_webView loadRequest:request];
  return true;
}

NSURLProtocol实现请求拦截

然后在NSURLProtocol协议中的startLoading方法实现请求拦截

//  FlutterNSURLProtocol.h

#import 
#import 
NS_ASSUME_NONNULL_BEGIN

@interface FlutterNSURLProtocol : NSURLProtocol

@end

NS_ASSUME_NONNULL_END

//  FlutterNSURLProtocol.m

- (void)startLoading
{
    NSMutableURLRequest *mutableReqeust = [[self request] mutableCopy];
    //给我们处理过的请求设置一个标识符, 防止无限循环,
    [NSURLProtocol setProperty:@YES forKey:KFlutterNSURLProtocolKey inRequest:mutableReqeust];

    NSString *agent = [mutableReqeust valueForHTTPHeaderField:@"User-Agent"];
    
    FlutterMethodChannel *channel = [FlutterInstance channelWithAgent:agent];

    if(channel==nil){
        NSURLSession *session = [NSURLSession sessionWithConfiguration:[NSURLSessionConfiguration defaultSessionConfiguration] delegate:self delegateQueue:nil];
        self.task = [session dataTaskWithRequest:self.request];
        [self.task resume];
        return;
    }
    [channel invokeMethod:@"shouldInterceptRequest" arguments:url result:^(id  _Nullable result) {
        if(result!=nil){
            NSDictionary *dic = (NSDictionary *)result;
            FlutterStandardTypedData *fData = (FlutterStandardTypedData *)[dic valueForKey:@"data"];
            NSString *mineType = dic[@"mineType"];
            NSString *encoding = dic[@"encoding"];
            if([encoding isEqual:[NSNull null]])encoding = nil;
            NSData *data = [fData data];

            NSURLResponse* response = [[NSURLResponse alloc] initWithURL:self.request.URL MIMEType:mineType expectedContentLength:data.length textEncodingName:encoding];
            [self.client URLProtocol:self didReceiveResponse:response cacheStoragePolicy:NSURLCacheStorageAllowed];
            [self.client URLProtocol:self didLoadData:data];
            [self.client URLProtocolDidFinishLoading:self];
        }else{
            NSURLSession *session = [NSURLSession sessionWithConfiguration:[NSURLSessionConfiguration defaultSessionConfiguration] delegate:self delegateQueue:nil];
            self.task = [session dataTaskWithRequest:self.request];
            [self.task resume];
        }
    }];
}

通过之前设置的userAgent获取相应的FlutterMethodChannel,调用shouldInterceptRequest方法获取Flutter数据，通过Xcode调试，我们知道相应的byte数据类型为FlutterStandardTypedData。或者参照下图:

MethodChannel数据类型对应关系

具体效果

实现google搜索logo替换

google搜索logo替换

Webview黑夜模式Flutter端实践

因为之前做了玩Android客户端kotlin版，适配各个站点文章黑夜模式，需要替换相关css资源，因此才会想到改造webview_flutter插件，下面是flutter版本替换掘金文章css文件产生的黑夜模式效果

Android掘金文章黑夜模式

Android效果

iOS掘金文章黑夜模式

iOS效果