摘要： Hybrid App融合了Native开发和Web开发的优势, 其开发方式在移动应用开发和桌面应用开发中所占的比重越来越大. 本文实现了WebView和Native的双向通信机制, 建立了Hybrid App的开发框架, 并通过对Web数据进行本地离线存储, 对Web文件采用基于字节流的差量更新的方式对框架进行优化.
Hybrid App兼具Web App跨平台的优势和Native原生应用拥有良好的交互体验的优势. 目前Hybrid App开发方式有两类, 第一类通过第三方中间件平台实现, 比如借助PhoneGap或者Ionic. 第二类是在移动端或者PC端软件中嵌入一个或者多个WebView, 并实现WebView和Native的双向通信, 使得WebView具有访问本地硬件和本地代码的能力, 同时Native也具有访问WebView中JavaScript代码的能力. 本文实现的Hybrid App框架和优化方案基于课题组的融合通信项目, 该项目具有Andorid, IOS和Windows三个终端. 为了提高各终端开发效率, 在已有框架基础上引入Hybrid App开发方式, 最终使得三个终端的界面用一套Web文件来展现. 由于在PhoneGap等平台中提供了大量的本地能力封装机制, 既增加软件的复杂度, 又降低了引入后软件的效率, 而在融合通信系统Web和Native交互的过程中,Native提供的API主要由融合通信系统中已经成熟的业务逻辑模块提供, 所以在项目改进过程中只需实现一个轻量级的Hybrid App框架[3,4], 而不需要引入第三方平台.
正文中首先介绍了Native和WebView的双向交互机制, 在此基础上实现了Hybrid开发基本框架, 并针对该框架设计和实现了优化方案, 最后对框架和优化方案进行测试. 在设计优化机制的过程中参考了HTML5技术. 目前HTML5的manifest机制提供了Web文件的离线访问, HTML5的Localstorage机制提供了数据缓存的功能. 但其均存在不足, 当Web文件被改改动, manifest发生改变, 其中所有定义的缓存文件全部重新以全量的方式获取, 消耗流量, 而且控制不够灵活. Localstorage提供了非常易用的API, 通过setItem,getItem, removeItem, clear四个接口可以实现数据离线存储, 但是按照目前标准, 存储空间太小, 浏览器只给每个独立的域名提供5M的存储空间. 虽然HTML5还提供了Web SQL Database, 它拥有一套使用SQL语句操作客户端数据库的API, 在本地建立轻量级的数据库, 但此规范工作已经停止. 综上, 借鉴manifest和Localstorage机制, 利用Hybrid app的Native端的优势, 在Hybrid App开发框架的基础上设计了一套数据离线缓存和Web文件增量更新方案, 提高了hybrid App应用的性能和效率.
1 Hybrid App开发框架
1.1 在软件中嵌入WebView
Hybrid App开发框架需要引入WebView层. Chromium Embedded Framework (CEF)是基于Google Chromium项目实现的一个Web控件, 下面以Windows端嵌入CEF为例. 首先设计一个CWebClient类, 这个类主要完成对浏览器事件的回调处理. 该类需要继承CefClient和各种消息处理接口, 消息处理主要包括CefKeyboardHandler类提供的键盘输入相关的回调处理, CefLoadHandler提供的浏览器页面加载状态的回调处理, CefFocusHandler提供的焦点相关的回调处理,CefLifeSpanHandler提供的页面周期回调接口等. 然后将CWebClient类对象作为参数传入CefBrowser::Create Browser生成CEF实例并显示. 浏览器创建后, CefBrowser类用于对WebView进行控制, CefBrowser对象可以在cef窗口创建完成后由CefLifeSpanHandler接口中的OnAfterCreated函数的参数中获取.
1.2 Web和native交互通信机制
Hybrid App开发框架的核心是native和Web的交互通信机制. 通信机制可以使得WebView中的Web页面通过javascript函数访问native的中封装的接口API, 同样native也可以访问WebView中的javascript接口API.
由于Rsync算法用于同步两台机器中的一个文件.本文对Rsync算法从两个方面进行进行改进.
提供DNS服务的软件为named，该服务的主配置文件/etc/named.conf，其默认配置文件用vim打开如下（文件较长，部分代码用省略号替代）。
Windows下基于cef的WebView调用方式如下:
frame-＞ExecuteJavaScript(“alert(‘ok’)”, “”, 0); 其中frame为CefFrame实例. CefFrame实例可以通过CefBrowser对象实例获取.
Adroid平台和IOS平台对于Native调用Web端的javascript代码都有很好的原生支持.
1.2.1 Native调用Web
IOS中的调用方式如下,IOS中可以通过监控WebView的URL变化实现Web端调用Native.
1.2.2 Web调用Native
Windows中CEF可以通过重写CefV8Handler接口的方式实现本地的回调.
Android中可以通过重写WebChromeClient.onJsPrompt, onJsConfirm, 或onJsAler来实现.
1.3 Web和native通信的Bridge
综上, 针对windows, android, ios三个平台分别设计三个通信Bridge[11], 通过Bridge连接Web端和native端, 实现Web与Native的双向通信[5]. Bridge提供四个接口, 如表1所示, native的原生代码和Web端的javascript代码可以通过这四个接口进行双向通信, 在通信过程中, 函数名和参数被封装在JSON字符串中.当Web向native发送请求时, Web端的javascript代码通过调用SendToNative来向native发送请求的JSON字符串, native得到请求之后解析JSON串, 得到函数名和参数, 并执行本地响应的API操作, 完成后natvie端通过调用JsCallback将结果返回给Web端. Natvie请求Web端的过程相类似. Web和Native通过Bridge进行通信的时序图如图1所示.
表1 Bridge的四个函数接口
接口名称 描述 调用方SendToNative向native推送一个消息Webview NativeCallback触发native的callbackWebview SendToJs向Web侧推送一个消息native JsCallback触发Web侧的callbacknative
图1 Web和native双向通信机制
2 数据离线存储机制
在rsync算法中使用的弱滚动校验和算法基于Mark Adler的Adler32校验算法: 此算法根据的校验和和X1, Xn+1的字节流值可以简单快速地计算出的校验和. 校验算法如公式(1)(2)(3)所示.
离线数据以key/value键值对的形式进行存储, 为了实现这样的功能, 设计八个接口, 如表2所示. 同时,在native端封装对数据库的操作, 当Web端将数据通过json传递到本地后, native解析出key/value, 并将其写入数据库. 以存储离线数据接口CacheStore为例, Web侧实现如下代码即可实现存储数据的功能:
自主、合作、探究式学习是新课程改革所极力倡导的学习方式。在这种学习方式之下，学生的自主学习是基础。通过学生的自主学习，我们才能很准确地收集学生在自主学习过程中所遇到的困难，才能为接下来的“以学定教”提供教学决策，使得课堂教与学沿着正确的方向前进。但是课堂教学是不能仅仅停留在学生的自主学习环节的，因为这样的话学生只是发现了问题，却没能很好地解决问题。因此，从教学的实际效果上来说还是远远不够的。所以说，合作、探究环节才是新课程改革之下一堂课的最主要环节。通过这个环节，教师的教学目标才能实现，课堂教学的重难点才能得到有效突破，学生的个性化学习成果也才能有所保障。
表2 离线存储的八个接口
接口名称 描述 回调接口CacheStore储存离线数据OnCacheStoreCb CacheFetch获取离线数据CacheFetchCb CacheClear清空离线数据CacheClearCb CacheDelete删除离线数据CacheDeleteCb
3 Web文件差量更新机制
3.1 Rsync算法
总之，汉魏六朝时期的死亡观受到庄子哲学、自然气化论和命定说的交叉影响，体现在遗令文中时常也是混杂在一起的。而且，遗令文中的死亡观也存在着一个故作达观和真正达观的问题，存在着抗俗与顺俗的问题(详下文)，需要结合作者的具体情况和为文背景来仔细分辨和探索发现。故作达观者有时是为了排解死亡的恐惧，有时是为了矫时抗俗。真正达观者坦然面对死亡的来临，按照自己的本愿交代后事，但也有人兼顾时俗和儿孙，在本愿和俗情间求一调和，这在后事丧葬安排上十分明显的表现出来。
Web文件主要包括html, css, javascript文件, 为了节省带宽, 提高加载速度, 将这些文件进行离线存储, 当Web文件发生改变时, 采用差量更新的方式去得到新文件. 本文实现的Web文件差量更新机制基于rsync算法[6-8], 该同步算法可以将两台计算机中的内容不同的文件进行同步, 使之相同. 使用此算法的原因在于其滚动校验和及三级匹配校验和机制能保证在服务器端快速的生成差量信息包. Rsync算法的主要流程是: 机器A将Old文件分块并计算校验和序列, 将序列发送给机器B, 机器B通过New文件和A发送过来的校验和序列,产生差异包, 再将差异信息包发回给A, A通过差异信息包和Old文件生成New文件. 机器A和机器B进行文件同步主要步骤如下:
1) 机器A将文件Fold进行分割, 得到一系列的字节块Bi, 假设块大小为m节. 则Bi=Fold[im, (i+1)m-1], 其中最后一个块可能会小于m个字节.
2) 机器A对每个块计算两个校验和:和使用滚动32位校验和生成函数, 是若校验和生成函数. Hr使用128位的MD5校验和生成函数,是强校验和函数.
3) 机器A将校验和序列发送给机器B.
4) 机器B建立一个哈希值为16位, 表长度为2^16的哈希表. 将每个块生成的校验序列(Ui, Ri)插入到哈希表中, 其中每个块的Ri映射为16位并作为主键. 此时哈希表中的每一项指向的是拥有相同hash值的校验和列表的第一个元素.
5) 机器B从Fnew第一个字节开始, 通过三级匹配机制进行检索[10], 依次计算长度为S字节的块的32位滚动若校验和并映射为16位的哈希值, 如果哈希值对应的哈希表项非空, 且在Fold生成的哈希字典对应的列表项存在相同的弱校验和, 则再比较MD5强校验和, 如果相等, 则认为找到了匹配块.
6) 如果找到了匹配块, 差量信息字段中将插入两部分内容, 第一部分为上一次匹配位置和当前位置之间的未匹配的数据内容, 第二部分为当前匹配成功的b块的索引信息. 跳转步骤5, 搜索匹配块的工作会从当前匹配块重新启动.
7) 如果某个位置开始没有找到匹配, 就会前进一个字节, 跳转步骤5继续搜索匹配的块.
8) 如果Fnew整个文件搜索完毕, 机器B将差量信息发送给机器A.
9) 机器A根据差量信息和Fold生成Fnew.
3.2 算法的重要细节
不断完善水利施工质量管理，可以进一步指导水利工程施工企业正确开展施工行为，同时提高水利施工企业的经济效益。通过质量管理制度的建设和加强，可以有效地实现工程建设的“三控制、两管理、一协调”。监理单位在具体施工管理中，利用长期在工程建设实践中所形成的工作经验，建立起一套完整严密的组织机构、工作制度、控制程序和方法，加强对工程质量的控制，构建工程建设项目的质量控制体系，强化工程质量的管理。因此，必须深化对水利施工质量管理核心地位的认识，从而增强对工程质量的监管，推动水利工程建设。
通讯录信息, 群组成员信息, 通话记录等信息的获取会增加带宽开销, 为了节省带宽, 可以将以上数据进行本地缓存. 基于Web和native通信, 可以实现以上功能.
其中就是字节块的滚动校验和. 公式(4)(5)利用了递推关系, 可以快速的计算出连续值:
3.3 对rsync算法进行改进:
1) 由于服务器端保存着与客户端相同的旧版本文件, 所以在服务器端分割旧版本文件并生成校验和序列, 这样避免了客户端计算和传输校验和序列的开销.
2) 由于Web文件为多个文件, 为了对不同版本的多个Web文件进行管理, 引入版本号机制. 将同一时间的多个文件设定为相同版本.
当某个或者多个Web文件被修改, Web文件版本号增1, 并对过去版本的Web文件在服务器端生成对应版本的差量更新文件deltaXtoY, 其中X为低版本号, Y为高版本号, deltaXtoY包括更新文件列表和每个列表项对应的文件的增量更新信息, 文件列表对应全部的Web文件, 每个列表项对应一个Web文件. 服务器端生成每个列表项的增量信息的过程如图2所示.
图2 生成每个列表项的增量信息的过程
当客户端启动, 获取最新的Web文件版本号, 检测自己当前版本是否为最新, 如果不是, 则下载对应的差量更新包, 得到差量deltaXtoY后与本地的低版本的Web文件一起生成最新版本的Web文件. 当服务器没有对应版本的差量更新包, 则进行全量更新. 对于每个文件的增量更新过程如图3所示. 旧文件根据对应的差量更新列表项的差量信息, 生成新的文件, 合并过程会读取增量更新信息中的索引信息和数据信息, 并将根据索引信息在Fold中提取数据块, 生成新文件的JavaScipt代码如下:
4 测试及结果分析
4.1 测试Hybrid开发框架
在Hybrid开发框架的基础上, 将软件的界面设计通过Web方式实现, 三个平台的应用采用一套Web文件进行描述, 实现了软件界面的集中开发和集中调试, 软件界面如图4和图5所示. 当用用户通过语音通话界面和消息发送界面与应用交互, Web端会调用Native的业务逻辑, 本地在执行业务逻辑的过程中实时的将状态回调给WebView, WebView更新界面. 同时客户端中将通话记录进行缓存, 每次从本地加载通话记录, 如图6所示.
4.2 测试离线缓存机制
本地缓存主要节省了客户端与服务器建立连接和传输数据的时间, 试验中在带宽为200KB/s的带宽环境下采集了13次数据, 每次分别从本地和服务器重复三次获取相同字节大小的数据, 获取时间时为从发起请求到数据接收完毕, 单位为毫秒, 计算平均时间并记录.其中从服务器获取数据通过jquery的AJAX方法获取信息流, 服务器端采用mysql数据库, 客户端缓存数据从sqlite数据库中读取. 实验数据中可以分析出以下趋势:如图7所示, 从服务器获取数据需要一定建立连接的时间, 随着获取数据量的增多, 获取时间逐渐受到网速的限制, 同时网络状况也会影响获取数据的时间. 从本地数据库获取数据所需的时间基本是随着数据量增多,呈线性增长的, 相比服务器时间更短.
4.3 测试差量更新机制
通过对服务器端test.js进行10次修改, 产生了10个不同的版本. 每次的具体修改信息如表格所示. 全量更新所需的传输流量为新文件大小, 差量更新为差量信息包的大小, 服务器端rsync算法划分数据块的大小为700字节. 则每次传输的数据量如图7所示. 横轴表示文件的版本, 纵轴标识需要传输的数据大小. 如图8所示,位于上方的折线标识每次全量更新需要传输的字节,位于下方的折线标识差量更新需要传输的字节. 可以通过分析得出如下趋势: 增量信息包的大小与修改文件的位置, 修改文件的内容, 块划分大小有一定的关系,比如增加已有的内容, 增量信息包体积小一些, 因为新文件中的数据块会在旧文件中的数据块中找到匹配.通过10次信息对比, 每次增量包的大小基本都与全量数据大小相差100倍. 相对全量更新节省99%的流量消耗, 同时提高传输时间.
5 结束语
米维信息认为本文通过设计Hybrid开发框架, 屏蔽了各终端的差异, 将客户端中的原生界面设计工作转移到Web界面的设计, 提高了开发效率. 同时对Hybrid开发框架进行优化, 提高了Hybrid应用的页面加载速度, 节省了带宽. 综上, 本文设计的Hybrid开发框架具有实用性和可行性, 同时优化方案对其他Hybrid开发方案具有一定的参考价值.
