Flutter WebView使用以及分析

Flutter WebView使用以及分析

一、背景

在开发过程中很多时候都需要用WebView展示网页，在android中可以直接使用WebView控件加载网页，iOS也有WKWebView或UIWebView，那么在flutter中如何加载网页？
从以下问题入手：

• flutter中是否有类似原生的WebView控件？
  
• flutter中如何使用WebView加载网页？
  
• flutter的WebView如何与js通信的？
  
• flutter中WebView是如何实现？
  

二、Flutter WebView

flutter层不支持webview，加载网页的功能还需要借助原生控件来处理。
由于Webview是一个非常复杂的控件，flutter再重新实现一遍成本非常高，而各个平台都有很完善的WebView控件，故flutter团队提供了嵌入原生WebView的解决方案，flutter通过 PlatformView 使用原生控件。
通过pub.dev搜索以及对比网上文章，发现了几个比较受欢迎的flutter webview插件，

三个插件对比：

对比总结：

• flutter_inappwebview：功能非常丰富，文档非常完善，属于三方库中的精品，推荐使用。
  
• webview_flutter：功能一般，满足基本功能需求，官方出品持续完善中。
  
• flutter_webview_plugin：功能不够完善，现有功能将积极合入webview_flutter，后续不在维护，不建议使用。
  

三、使用

下文将使用flutter_inappwebview，进行使用简介，文档地址。
flutter_inappwebview主要功能清单如下：

• InAppWebView：Flutter Widget，用于添加集成到 Flutter 小部件树中的内联原生 WebView。
  
• ContextMenu：此类表示 WebView 上下文菜单。
  
• HeadlessInAppWebView：表示无头模式下的 WebView 的类。它可用于在后台运行 WebView，而无需将 InAppWebView 附加到小部件树。
  
• InAppBrowser：使用本机 WebView 的应用内浏览器。
  
• ChromeSafariBrowser：在 Android / SFSafariViewController 上使用 Chrome 自定义标签的应用程序内浏览器。
  
• InAppLocalhostServer：这个类允许你在 http://localhost:[port]/ 上创建一个简单的服务器。默认端口值为 8080。
  
• CookieManager：此类实现了一个单例对象（共享实例），该对象管理 WebView 实例使用的 cookie。
  
• HttpAuthCredentialDatabase：此类实现管理共享 HTTP 身份验证凭据缓存的单例对象（共享实例）。
  
• WebStorageManager：这个类实现了一个单例对象（共享实例），它管理 WebView 实例使用的 Web 存储。
  

可以看出，flutter_inappwebview支撑多种WebView的使用方式，下文以 InAppWebView 为例进行介绍，因为InAppWebView是Flutter组件可以嵌入Widget Tree，用法更灵活，更贴近实际需求。
Flutter 支持两种模式集成原生控制：虚拟显示模式 (Virtual displays) 和混合集成模式 (Hybrid composition) ：

• Virtual displays：虚拟显示模式会将 android.view.View 实例渲染为纹理，因此它不会嵌入到 Android Activity 的视图层次结构中。某些平台交互（例如键盘处理和辅助功能）可能无法正常工作。
  
• Hybrid composition：混合集成模式需要 Flutter 1.22 （推荐使用 1.22.2 版本）。这种模式将原生的 android.view.View 附加到视图层次结构中。因此，键盘处理和无障碍功能是开箱即用的。在 Android 10 之前，此模式可能会大大降低 Flutter UI 的帧吞吐量 (FPS)。
  

根据具体情况来决定使用哪种模式。flutter webview在iOS平台仅支持Hybrid Composition 模式。
推荐使用Hybrid Composition 模式。
3.1 引入依赖

flutter项目配置文件pubspec.yaml中引入依赖：

1. dependencies:  
2.   flutter_inappwebview: ^5.3.2

复制代码

android项目配置：

1. android {
2.     compileSdkVersion 29
3.    
4.     defaultConfig {
5.         minSdkVersion 19
6.         targetSdkVersion 29
7.     }
8. }

复制代码

gradle相应版本：
   gradle插件版本 ：4.1.* 以及上
  gradle版本 ：5.6 及以上
  注意事项：
   flutter_inappwebview需要依赖androidx和swift。
  3.2 flutter中使用

widget中使用，并开启Hybrid Composition模式。

1. import 'package:flutter/material.dart';
2. import 'package:flutter_inappwebview/flutter_inappwebview.dart';
4. class Browser extends StatefulWidget {
5.   const Browser(Key key, this.url, this.title) : super(key: key);
7.   final String url;
8.   final String title;
10.   @override
11.   _BrowserState createState() => _BrowserState();
12. }
14. class _BrowserState extends State<Browser> {
15.   final GlobalKey webViewKey = GlobalKey();
16.   InAppWebViewGroupOptions options = InAppWebViewGroupOptions(
17.     crossPlatform: InAppWebViewOptions(
18.       useShouldOverrideUrlLoading: true,
19.       mediaPlaybackRequiresUserGesture: false,
20.     ),
21.     /// android 支持HybridComposition
22.     android: AndroidInAppWebViewOptions(
23.       useHybridComposition: true,
24.     ),
25.     ios: IOSInAppWebViewOptions(
26.       allowsInlineMediaPlayback: true,
27.     ),
28.   );
30.   @override
31.   Widget build(BuildContext context) {
32.     return Scaffold(
33.       appBar: AppBar(
34.         title: Text(widget.title),
35.       ),
36.       body: InAppWebView(
37.         key: webViewKey,
38.         initialUrlRequest: URLRequest(url: Uri.parse(widget.url)),
39.         initialOptions: options,
40.       ),
41.     );
42.   }
43. }

复制代码

如果只加载网页不要复杂的定制，这样的配置已经可以啦~
3.3 InAppWebview提供的接口

InAppWebview实现了原生WebView（Android）和WKWebView（iOS）中绝大多数接口，将这些原生接口代理到了Flutter层，极大的提高了不同平台的使用效率。
接口组织方式分为两部分：

• 接口配置：控制接口功能是否启用。
  
• 接口回调：实现接口来处理业务逻辑。
  

在使用某个接口功能时，需要先检测相应接口开关是否开启，开启有对应接口回调才会生效，一些常见的生命周期回调函数则不需要配置开关。
因为不同平台本身的差异，整体接口分为三类，通过InAppWebViewGroupOptions类进行配置管理：

• crossPlatform: InAppWebViewOptions 用于配置Android和iOS通用的接口功能。
  
• android: AndroidInAppWebViewOptions 仅用于配置Android特有的接口功能。
  
• ios: IOSInAppWebViewOptions 仅用于配置iOS特有的接口功能。
  

接口配置实例：

1. InAppWebViewGroupOptions options = InAppWebViewGroupOptions(
2.     //夸平台配置
3.     crossPlatform: InAppWebViewOptions(
4.       useShouldOverrideUrlLoading: true,//加载url拦截功能
5.       useShouldInterceptAjaxRequest: true,//ajax请求拦截
6.       useOnLoadResource: true,//资源加载回调
7.       allowFileAccessFromFileURLs: true,//资源加载
8.       mediaPlaybackRequiresUserGesture: false,//多媒体控制
9.     ),
10.     //Android平台配置
11.     android: AndroidInAppWebViewOptions(
12.       useHybridComposition: true,//支持HybridComposition
13.       useShouldInterceptRequest: true,//请求加载链接，可以用于实现Web离线包
14.     ),
15.     //iOS平台配置
16.     ios: IOSInAppWebViewOptions(
17.       allowsInlineMediaPlayback: true,
18.     ),
19.   );
20.   
21.   // 使用options配置
22.   InAppWebView(
23.         key: webViewKey,
24.         initialUrlRequest: URLRequest(url: Uri.parse("https://www.baidu.com/")),
25.         initialOptions: options,//配置options
26.         // ...
27.         )

复制代码

接口回调实例：

1. InAppWebView(
2.    key: webViewKey,
3.    initialUrlRequest: URLRequest(url: Uri.parse("https://www.baidu.com/")),
4.    initialOptions: options,// 开关配置项
5.    onWebViewCreated: (InAppWebViewController controller) {
6.       print("$TAG onWebViewCreated");
7.    },
8.    onLoadStart: (InAppWebViewController controller, Uri? url) {
9.       print("$TAG onLoadStart url:$url");
10.    },
11.    onLoadStop: (InAppWebViewController controller, Uri? url) {
12.       print("$TAG onLoadStop url:$url");
13.    },
14.    onLoadError: (InAppWebViewController controller, Uri? url, int code,
15.             String message) {
16.       print("$TAG onLoadError url:$url code:$code message:$message");
17.    },
18.    onLoadHttpError: (InAppWebViewController controller, Uri? url,
19.             int statusCode, String description) {
20.       print("$TAG onLoadHttpError url:$url statusCode:$statusCode                                                     description:$description");
21.    },
22.    onConsoleMessage:
23.         (InAppWebViewController controller, ConsoleMessage consoleMessage) {
24.           print("$TAG onConsoleMessage consoleMessage:$consoleMessage");
25.    },
26.    onProgressChanged: (InAppWebViewController controller, int progress) {
27.       print("$TAG onProgressChanged progress:$progress");
28.    },
29.   shouldOverrideUrlLoading: (InAppWebViewController controller,
30.             NavigationAction navigationAction) async {
31.       print("$TAG shouldOverrideUrlLoading navigationAction:$navigationAction");
32.           return null;
33.   },
34.   // 资源加载监听器
35.   onLoadResource:(InAppWebViewController controller, LoadedResource resource) {
36.       print("$TAG onLoadResource resource:$resource");
37.   },
38.   // 滚动监听器
39.   onScrollChanged: (InAppWebViewController controller, int x, int y) {
40.       print("$TAG onScrollChanged x:$x  y:$y");
41.   },
42.   onLoadResourceCustomScheme:(InAppWebViewController controller, Uri url) async {
43.       print("$TAG onLoadResourceCustomScheme url:$url");
44.       return null;
45.   },
46.   onCreateWindow: (InAppWebViewController controller,
47.             CreateWindowAction createWindowAction) async {
48.       print("$TAG onCreateWindow");
49.       return true;
50.   },
51.   onCloseWindow: (InAppWebViewController controller) {
52.       print("$TAG onCloseWindow");
53.   },
54.   // 过量滚动监听器
55.   onOverScrolled: (InAppWebViewController controller, int x, int y,
56.             bool clampedX, bool clampedY) async {
57.       print("$TAG onOverScrolled x:$x  y:$y clampedX：$clampedX clampedY：$clampedY");
58.   },
59.    
60.   //Android特有功能，请求加载链接，可以拦截资源加载，并替换为本地Web离线包内的资源
61.   androidShouldInterceptRequest: (InAppWebViewController controller,
62.             WebResourceRequest request) async {
63.       print("$TAG androidShouldInterceptRequest request:$request");
64.      return null;
65.   },
66.    
67.   //iOS特有功能
68.   iosOnNavigationResponse: (InAppWebViewController controller,
69.             IOSWKNavigationResponse navigationResponse) async {
70.       return null;
71.   },
72. )

复制代码

接口名称已经可以表示相应功能了，就不一一加注释了~
3.4 InAppWebview与Js通信

InAppWebview与Js通信有多种方式，具体文档地址。
a.获取InAppWebViewController

js通信都是通过 InAppWebViewController 实现的，需要先通过onWebViewCreated方法获取InAppWebViewController 对象：

1. // InAppWebview中获取InAppWebViewController
2. onWebViewCreated: (InAppWebViewController controller) {
3.   // ...
4. },

复制代码

b.js调Flutter

通过InAppWebViewController#addJavaScriptHandler添加js处理器，js的调用将会回调改方法。

1. // InAppWebview中获取InAppWebViewController
2. onWebViewCreated: (InAppWebViewController controller) {
3.   // 注册一个JS处理方法，名称为myHandlerName
4.   controller.addJavaScriptHandler(handlerName: 'myHandlerName', callback: (args) {
5.     // 打印js方传递过来的参数
6.     print(args);
8.     // 返回给js方的结果
9.     return {
10.       'bar': 'bar_value', 'baz': 'baz_value'
11.     };
12.   });
13. },

复制代码

js代码中：

1. window.flutter_inappwebview.callHandler('myHandlerName', {a:1,b:2})

复制代码

flutter_inappwebview为InAppWebView框架自动注入的js对象，方便分发js调用到Flutter。
c.Flutter调js

通过 InAppWebViewController.evaluateJavascript 调用js方法。在使用之前需要和js放约定好通讯协议：

• 方法名称
  
• 传参数据格式
  
• 返回结果数据格式
  

1. onLoadStop: (controller, url) async {
2.   // 直接调用js代码，并等待结果
3.   final result = await controller.evaluateJavascript(source: """
4.     window.handleFlutterInvoke("{a:1,b:2}");
5.   """);
7.   print("result")
8. },

复制代码

其他方式参考上述文档~
四、InAppWebview原理

Flutter的WebView功能是直接依赖不同平台的WebView实现的，已经知道是通过PlatformView实现的，那他们是怎么组合起来的呢？此处以Android平台为例分析下实现过程。
4.1 Flutter与Android组件关联方式

主要实现步骤：

• Android原生实现PlatformView，内部通过getView方法返回具体要用到的Android View
  
• Android原生实现PlatformViewFactory ，内部通过create方法创建前一步的PlatformView实例
  
• 注册前一步中的平台视图工厂类，并指定viewTypeId用于区分不同的平台视图。
  
• FlutterActivity子类中：
  
• 1. class MainActivity : FlutterActivity() {
  2.     override fun configureFlutterEngine(flutterEngine: FlutterEngine) {
  3.       flutterEngine
  4.         .platformViewsController
  5.         .registry
  6.         .registerViewFactory("<platform-view-type>", NativeViewFactory())
  7.     }
  8. }

  复制代码
• 插件中注册：
  
• 1. class PlatformViewPlugin : FlutterPlugin {
  2.     override fun onAttachedToEngine(binding: FlutterPluginBinding) {
  3.        binding
  4.         .platformViewRegistry
  5.         .registerViewFactory("<platform-view-type>", NativeViewFactory())
  6.     }
  8.     override fun onDetachedFromEngine(binding: FlutterPluginBinding) {}
  9. }

  复制代码
• Flutter层自定义Widget整合Android和iOS层视图
  

1. class CustomFlutterWidget extends StatelessWidget {
2. @override
3. Widget build(BuildContext context) {
4.    final defaultTargetPlatform = ...;
5.      // Android
6.    if (defaultTargetPlatform == TargetPlatform.android) {
7.      if (useHybridComposition) {// 混合模式
8.        return PlatformViewLink(
9.          viewType: 'viewTypeId',//唯一标识
10.          // ...
11.        );
12.      } else {
13.        return AndroidView(// 虚拟显示
14.          viewType: 'viewTypeId',//唯一标识
15.          // ...
16.        );
17.      }
18.    } else if (defaultTargetPlatform == TargetPlatform.iOS) {
19.        // iOS
20.      return UiKitView(// 混合模式
21.        viewType: 'viewTypeId',//唯一标识
22.        // ...
23.      );
24.    }
25.    return Text(
26.        '$defaultTargetPlatform is not yet supported by the flutter_inappwebview plugin');
27. }
28. }

复制代码

通过上述步骤就可以使用特定平台的原生View了，iOS也是同样方式实现细节略有差异~
4.2 InAppWebView实现类图


整体类图还是比较清晰的，Flutter与平台层通信借助MethodChannel~
4.3 Flutter与平台层通信

Flutter提供了多种通信渠道的实现方式，具体文档链接：

• MethodChannel
  
• BasicMessageChannel
  

Flutter MethodChannel

1. import 'dart:async';
3. import 'package:flutter/material.dart';
4. import 'package:flutter/services.dart';
5. ...
6. class _MyHomePageState extends State<MyHomePage> {
7.   static const platform = const MethodChannel('samples.flutter.io/testMethodChannel');
9.   // 调用通信方法.
10.   Future<Null> _getBatteryLevel() async {
11.     try {
12.       final int result = await platform.invokeMethod('methodName', params);
13.       print(result);
14.     } on PlatformException catch (e) {
15.       
16.     }
17.   }
18. }

复制代码

Android MethodChannel

1. import android.os.Bundle
2. import io.flutter.app.FlutterActivity
3. import io.flutter.plugin.common.MethodChannel
4. import io.flutter.plugins.GeneratedPluginRegistrant
6. class MainActivity() : FlutterActivity() {
7.   private val CHANNEL = "samples.flutter.io/testMethodChannel"
9.   override fun onCreate(savedInstanceState: Bundle?) {
10.     super.onCreate(savedInstanceState)
11.     GeneratedPluginRegistrant.registerWith(this)
13.     MethodChannel(flutterView, CHANNEL).setMethodCallHandler { call, result ->
14.       if(call.methodName == 'methodName') {
15.           Log.d(TAG,"${call.arguments}")
16.           // TODO
17.           result.success(1)
18.       }                                                      
19.     }
20.   }
21. }

复制代码

五、总结

Q1：flutter中是否有类似原生的WebView控件？
A1：Flutter没有类似WebView控件，借助平台层实现WebView功能。
Q2：flutter中如何使用WebView加载网页？
A2：借助现网提供的WebView插件即可实现网络加载，其中flutter_inappwebview插件非常优秀，推荐使用。
Q3：flutter的WebView如何与js通信的？
A3：InAppWebView已经实现了一套完整的js通信机制，如果用官方WebView插件，则需要自己实现一套JsBridge同时适用Android和iOS，成本稍高一点。
Q4：flutter中WebView是如何实现？
A4：Flutter本身不提供WebView功能，通过PlatformView去适用各个平台已有的WebView能力，降低了实现成功。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！