Android中Hybrid实战

目录

1、项目中Hybrid整体结构
2、桥接层
3、基础通信层
4、打开离线插件的流程
5、离线插件数据预加载优化

1、我的项目中Hybrid层次结构

Android中Hybrid实战

 

(1)H5页面层。
(2)桥接层:BridgeJs是一个.js文件,是NA和H5通信的桥梁,WebView在加载url之前需要将BridgeJs前置注入。
(3)基础通信层:该层主要由BridgeWebView、BridgeManager、WebPlugin组成,BridgeWebView提供了基本的页面加载,并捕获BridgeJs发送过来的事件交给BridgeManager进行处理;BridgeManager具备BridgeWebView的控制能力,负责处理NA向H5以及H5向NA的消息处理;WebPlugin是离线化插件,为了加速H5页面的展示,可将某个业务的h5、css、js、图片等资源打包,并离线化至本地,在打开相应页面的时候只需获取其对应页面的数据,省去h5、css、js、图片等资源的下载时间。
(4)协议分发层:该层是一个总体的bdwm协议分发器,将收到的协议分发到各个协议实现层进行处理。
(5)协议实现层:该层针对bdwm协议不同的scheme,分别对应不同的实现。NativePageCall用于APP内各个页面的跳转;WebSDKCall是用于为H5提供各种NA能力,WebPluginCall用于打开本地离线化插件。
(6)Native层:该层为客户端App层,为上述几种协议提供能力调用和支持。

2、桥接层

2.1、BridgeJs是什么?

BridgeJs是一个.js文件,是NA和H5通信的桥梁,具体来说就是H5调用NA能力或者打开NA页面必须通过调用BridgeJs中的方法来通知NA,NA也必须调用BridgeJs中的方法来给H5页面发送消息。

2.2、BridgeJs的注入方式

WebView注入BridgeJs文件的方式为,先将该文件读入内存作为BridgeJs,Android4.4以前通过loadUrl("javascript:" + BridgeJs)进行注入,BridgeJS注入完毕后,在JS函数尾部通过onConsoleMessage向NA发起通知,标记注入完毕的事件;4.4后的版本,可使用evaluateJavascript (String script, ValueCallback<String> resultCallback)方法注入并实现回调,注入完成后可向对应H5页面种入NA基本信息,供H5使用并调用H5中Ready方法触发H5页面渲染。

3、 基础通信层

3.1、BridgeWebView

由WebView+TitleBar+ProgressBar构成,ProgressBar根据onProgressChanged(WebView view, int newProgress)显示当前页面加载进度,避免页面加载时无状态,TitleBar支持多种主题,为H5提供三种UI操作元素(返回按钮,标题,功能按钮);WebView是作为H5页面的容器,在加载页面的同时,也负责捕获页面消息和注入JS。

3.2、BridgeManager

通过重写shouldOverrideUrlLoading(WebView view, String url),将收到的重定向url交给BridgeManager去拦截,BridgeManager通过调用SchemeDispatcher. onDispatch(String url)的去处理消息;如果BridgeWebView主动向H5发送消息,则通过BridgeManager执行相应的javascript方法。

3.3、 WebPlugin

3.3.1、离线插件整体思路

Android中Hybrid实战

 

(1)、运营平台上传打包好的离线插件;
(2)、server端发下离线插件配置;
(3)、App端根据server下发配置下载和更新离线插件。

(2.1)、离线插件包括html、css、js、img和config.json文件。
config.json文件是插件配置文件,记录插件包含的页面及其页面路径,是一段json数据,例如:

Android中Hybrid实战

 

(3.1)、server端下发离线插件配置包括一个allMd5值和一个plugin_list插件列表,外层的md5表示所有插件zip包共同计算的总md5值,用于和本地总md5对比,判断是否有插件要更新。plugin_list中每个插件包含plugin_id,url和md5,plugin_id唯一标识该插件,并作为data/data/package name/WMPlugins/目录下插件的路径名,url为插件下载地址,md5为插件zip包的md5值,用于判断当前插件是否需要更新及下载完成后校验该包的完整性。

离线插件分为正常更新和紧急更新:

3.3.2离线插件的正常更新

Android中Hybrid实战

 

(1)首先检测当前是否有更新任务队列正在运行,如果有,则直接返回;
(2)检测接口返回的allMD5值与本地sharedPreferences记录的上次成功更新的总md5值是否相同,如果相同,则直接返回,否则继续;

(3)为每个plugin配置更新任务PluginUpdateTask,然后放到线程池中执行,且所有的Task及其状态被记录在一个HashMap<String, PluginUpdateState>中,用于判断是否所有的插件都更新完成并且成功;

(4)PluginUpdateTask实现单个插件的更新流程:先检查本地相同pluginId的md5是否与新的相同,若相同,则直接返回True,否则,依次执行插件下载、md5完整性校验、删除旧插件、解压,最后将该插件新的md5值记录到本地。(每个插件下载成功或者失败都将其状态记录到HashMap<String, PluginUpdateState>中);

(5)检测是否所有的插件更新完成并且成功,如果是,则将allMd5值记录到本地,否则等待下次更新或者紧急更新。

3.3.3、离线包紧急更新

Plugin紧急更新用于一些极端case,在某些场景下,用户点击进入离线插件,可能会遭遇打开失败(例如插件被清理,上一次更新异常等),这种情况下,需要根据插件的pluginId,为该plugin开启独立的插件下载任务,且不与正常的更新检测任务耦合。流程如下:

Android中Hybrid实战

 

(1)插件启动失败,进入BridgeWebView页,显示loading;

(2)根据pluginId,查找内存中的PluginBean,若找到,则直接开始下载,若未找到,则重新拉取离线插件接口,获取PluginBean,

(3)为PluginBean配置PluginEmergencyTask,放到线程池中开启紧急下载任务,复用单个插件下载逻辑下载该插件。(不同的是此时不需要对该plugin新的md5值和本地md5只校验,因为如果是该插件正常情况下下载成功,但是被删除,校验md5值会直接返回,无法下载该插件);

(4)若下载成功则重新打开该拆件,否则,关闭页面,并提示失败。

4、打开离线插件的流程:

Android中Hybrid实战

 

一个打开plugin的bdwm协议是这样的:
demo://plugin?pluginId=xxx&pageName=xxx

(1)根据pluginId,获取该插件的目录pluginDir,一般为/data/data/package name/pluginId
(2)进入插件目录,找到config.json文件,并将其读取为WebPluginConfigModel;
(3)根据的pageName,可以查找到对应页面的pagePath;
(4)通过BridgeWebView打开本地页面"file://" + pluginDir + pageFilePath + "?" + query。

5、离线插件数据预加载优化

为了进一步加快离线包的页面显示速度,提出了离线包预加载数据,webview打开一个url之前,发起一个本地网络请求去请求即将打开的h5页面的数据。

1、预加载H5页面的前提:

在离线包的config.json文件中为需要预加载的页面添加预加载数据PreloadRequest,主要包含预加载的url,请求方法,请求参数等。

2、H5离线插件页面预加载数据流程如下:

Android中Hybrid实战

 

打开预加载h5页面的url一般是
demo://plugin?pluginId=xxx&pageName=xxx&requestPreload=true

(1)首先根据pluginId从对应插件的config配置文件中读取相应页面的预加载数据PreloadRequest。

(2)根据预加载数据PreloadRequest中的url,请求方法,请求参数等利用本地okhttp框架构建一个网络请求,去获取数据。

(3)当数据获取成功,如果jsbridge注入完成,则调用其回调方法PreloadFinish,将获取到的数据传递给h5页面;如果jsbridge未注入完成,则将获取的数据缓存到内存,待jsbridge注入完成,在其注入完成的回调中,调用h5页面的回调方法PreloadFinish将数据传递给h5页面。h5页面收到数据后,并可根据数据去填充页面。

注:我们用一个boolean的变量标记jsbridge是否注入完成,jsbridge注入完成,会有一个回调,我们可以在回调中将这个变量置位true,标记注入完成。

Android中Hybrid实战

 

 

Android中Hybrid实战

+qq群:853967238。获取以上高清技术思维图,以及相关技术的免费视频学习资料。