Android Webview容器初步构思
一，目前Hybrid技术主要分为以下两类:
- 采用ReactNative或者weex之类的框架实现，通俗点就是程序员用js写代码，然后框架负责把js代码翻译成原生代码，最后呈现出原生页面；
- 另外一个就是采用Webview组件，和webAPP的区别就是，webAPP整个APP是一个web容器，各种页面跳转包括效果实现都是在这个容器中通过H5技术实现。
而Hybrid Webview的实现方案中，每个页面都是一个单独的webview容器，页面之间的跳转，一些特殊效果，特殊组件的实现，都是通过H5发消息来调取原生功能实现的
二，Hybrid Webview方案的优劣势
优势：
- 各平台统一使用H5页面，减少了开发工作量
- H5页面可以动态更新，功能迭代包括处理bug都更加灵活
劣势：
- H5页面的部分用户体验不如native
- 需要适配各个机型设备
- 原生端基础框架搭建费时费力，需要三方（Android，iOS，H5）配合,增加了沟通协调的成本
三，关键实现
- jsBridge
作为H5和native的沟通桥梁，H5通过JsBridge调用Native功能，native通过JsBridge回传信息给H5
- Route模块
路由模块用以实现原生页面与H5页面的自由跳转，页面与页面之间做到尽量解耦
- Handlers
部分功能（相机，Dialog，下拉刷新等）使用Native代码实现，实现相应的Handler供H5调用
- 本地缓存模块
H5页面的资源如果需要全部从网络加载，势必会大大拖慢页面的加载速度，破坏用户体验，于是很直觉的实现方案就是把H5需要的一些资源打包到本地，当H5页面需要时，直接从本地获取，这样就可以实现h5页面秒开的性能
- HybridFragment
作为项目中承载Hybrid功能的组件，之所以选用Fragment而非activity，是为了更方便复用
- WebView
由于Android4.4及之后的系统版本才开始采用chromium作为WebView的内核，而更早之前的系统采用的是WebKit内核，对HTML5,CSS3,Javascript等的新特性支持较差，所以我们采用腾讯X5的方案来取代原生WebView。
腾讯X5方案的优势在于，可以从手机本身安装的微信、qq等腾讯客户端中直接获取X5浏览器内核，而不用在我们的app中预置或者重新下载一个完整的浏览器内核，那通常要几十m那么大。
当然这是1，2年前的不得已为之，随着目前主流手机的系统版本都已经在5.0以上，直接使用系统WebView也是可以接受的方案了。
四，JsBridge实现细节
H5传递数据给Android
H5调用iframe.src = '传递内容' ，Android的webviewClint就可以用通过shouldOverrideUrlLoading获取‘传递内容’
Android传递数据给H5的三种交互方案
1，WebView的addJavaScriptInterface
Java中编写特别的类与接口供WebView直接调用，在SDK17以上可以给接口@JavascriptInterface注释来保证安全性，但在17以下版本风险太大，估不适用这种方式。
2，SDK19以上可以使用webView.evaluateJavascript方法
3，通过webView.loadUrl(“javascript:” + script);
考虑到兼容性，采用方案3
1 | 关于JsBridge更具体的信息，可以参考https://github.com/fangj/WebViewJavascriptBridge的代码 |
五，Route模块实现
基本功能
- 无论是在原生页面，还是在H5页面，可以通过通用的方法，来跳往另一页面
- 具体跳转哪个页面可以通过远端动态调整，这样在某个页面有问题时，可以跳转到另一个没有错误的页面，甚至跳转一个新写的一样功能的H5页面来临时解决bug.
实现原理
- 在客户端本地维护一张路由表，表内内容是一组KV，key值代表页面代号，value代表具体的页面，如果value值是abc://协议，则是一个原生页面，http://协议，则是一个h5页面
举例
g_product_detail: abc://g_product_detail
g_product_detail: http://abc.com/productdetail.html
同样的key前者跳的是本地页面（客户端本地会维护abc协议之后的key值和具体的Activity类的关联关系），后者跳的是h5页面
定期从服务器接口检查、更新路由表，服务器会通过具体的用户、平台、版本号、环境等来返回相应的路由表，这就实现了远端的控制。
少数页面需要跳转前置逻辑的，通过RouteJumpHandler拦截路由跳转做特殊处理
六，本地缓存
基本功能
- 拦截H5调用资源的请求，并用本地资源去替换
- 本地缓存更新功能
实现原理
1 |
|
