关于Hybrid情势开辟app的优点，收集上已有许多文章论述了，这里不睁开。
本文将从以下几个方面论述Hybrid app架构设想的一些履历和思索。
原文及议论请到 github issue
通讯
作为一种跨言语开辟情势，通讯层是Hybrid架构起首应该斟酌和设想的，今后一切的逻辑都是基于通讯层睁开。
Native（以Android为例）和H5通讯，基础道理：
Android挪用H5：经由过程webview类的
loadUrl要领能够直接实行js代码，相似阅读器地点栏输入一段js一样的效果webview.loadUrl("javascript: alert('hello world')");H5挪用Android：webview能够阻拦H5提议的恣意url请求，webview经由过程商定的划定规矩对阻拦到的url举行处置惩罚（消耗），即可完成H5挪用Android
var ifm = document.createElement('iframe'); ifm.src = 'jsbridge://namespace.method?[...args]';
JSBridge即我们平常说的桥协定，基础的通讯道理很简朴，接下来就是桥协定详细完成。
P.S：注册私有协定的做法很罕见，我们常常遇到的在网页里拉起一个体系app就是采纳私有协定完成的。app在装置完成以后会注册私有协定到OS，阅读器发明自身不能辨认的协定（http、https、file等）时，会将链接抛给OS，OS会寻觅可辨认此协定的app并用该app处置惩罚链接。比方在网页里以itunes://开首的链接是Apple Store的私有协定，点击后能够启动Apple Store而且跳转到响应的界面。国内软件开辟商也常常这么做，比方付出宝的私有协定alipay://，腾讯的tencent://等等。
桥协定的详细完成
由于JavaScript言语自身的特别性（单历程），为了不壅塞主历程而且保证H5挪用的有序性，与Native通讯时关于须要猎取效果的接口（GET类），采纳相似于JSONP的设想理念:
类比HTTP的request和response对象，挪用方会将挪用的api、参数、以及请求署名（由挪用方天生）带上传给被挪用方，被挪用方处置惩罚完以后会吧效果以及请求署名回传挪用方，挪用方再依据请求署名找到本次请求对应的回调函数并实行，至此完成了一次通讯闭环。
H5挪用Native（以Android为例）示意图：
Native（以Android为例）挪用H5示意图：
基于桥协定的api设想（HybridApi）
jsbridge作为一种通用私有协定，平常会在团队级或许公司级产物举行同享，所以须要和营业层举行解耦，将jsbridge的内部细节举行封装，对外暴露平台级的API。
以下是笔者剥离公司营业代码后笼统出的一份HybridApi js部份的完成，项目地点：
别的，关于Native供应的种种接口，也能够简朴封装下，使之更切近前端工程师的运用习气：
// /lib/jsbridge/core.js
function assignAPI(name, callback) {
var names = name.split(/\./);
var ns = names.shift();
var fnName = names.pop();
var root = createNamespace(JSBridge[ns], names);
if(fnName) root[fnName] = callback || function() {};
}增添api：
// /lib/jsbridge/api.js
var assign = require('./core.js').assignAPI;
...
assign('util.compassImage', function(path, callback, quality, width, height) {
JSBridge.invokeApp('os.getInfo', {
path: path,
quality: quality || 80,
width: width || 'auto',
height: height || 'auto',
callback: callback
});
});H5上层运用挪用：
// h5/music/index.js
JSBridge.util.compassImage('http://cdn.foo.com/images/bar.png', function(r) {
console.log(r.value); // => base64 data
});界面与交互（Native与H5职责分别）
本质上，Native和H5都能完成界面开辟。险些一切hybrid的开辟情势都邑遇到一样的一个题目：哪些由Native担任哪些由H5担任？
这个回到原始的题目上来：我们为何要采纳hybrid情势开辟？简而言之就是同时应用H5的跨平台、疾速迭代才能以及Native的流畅性、体系API挪用才能。
依据这个准绳，为了充分应用两者的上风，应该尽量地将app内容运用H5来显现，而关于js言语自身的缺点，应该运用Native言语来填补，如转场动画、多线程功课（密集型使命）、IO机能等。即总的准绳是H5供应内容，Native供应容器，在有能够的条件下对Android原生webview举行优化和革新（参考阿里Hybrid容器的JSM），提拔H5的衬着效力。
然则，在现实的项目中，将全部app一切界面都运用H5来开辟也有不妥的地方，依据履历，以下情况照样运用Native界面为好：
症结界面、交互性强的的界面运用Native
因H5比较轻易被歹意进击，关于平安性请求比较高的界面，如注册界面、上岸、付出等界面，会采纳Native来庖代H5开辟，保证数据的平安性，这些页面平常UI变动的频次也不高。
关于这些界面，降级的计划也有，就是HTTPS。然则想说的是在国内的若收集环境下，HTTPS的体验实在是不咋地（主假如慢），而且只能走现网不能走离线通道。
别的，H5自身的动画开辟本钱比较高，在低端机械上能够有些绕不过的机能坎，原生js关于手势的支撑也比较弱，因而关于这些范例的界面，能够挑选运用Native来完成，这也是Native自身的上风不是。比方要完成下面这个音乐播放界面，用H5开辟门坎不小吧，留意下中心的波浪线背景，手指摆布滑动能够切换动画。
导航组件采纳Native
导航组件，就是页面的头组件，左上角平常都是一个back键，中心平常都是界面的题目，右侧的话偶然是一个隐蔽的悬浮菜单触发按钮偶然则什么也没有。
挪动端有一个特征就是界面下拉有个回弹效果，头不动body部份随着滑动，这类效果H5比较难完成。
再者，也是最重要的一点，假如全部界面都是H5的，在H5加载过程当中界面将是白屏，在弱收集下用户能够会很迷惑。
所以基于这两点，翻开的界面都是Native的导航组件+webview来构成，如许纵然H5加载失利或许太慢用户能够挑选直接封闭。
在API层面，会响应的有一个接口来完成这一逻辑（比方叫JSBridge.layout.setHeader），下面代码演示定制一个只要back键和题目的导航组件:
// /h5/pages/index.js
JSBridge.layout.setHeader({
background: {
color: '#00FF00',
opacity: 0.8
},
buttons: [
// 默许只要back键，而且back键的默许点击处置惩罚函数就是back()
{
icon: '../images/back.png',
width: 16,
height: 16,
onClick: function() {
// todo...
JSBridge.back();
}
},
{
text: '音乐首页',
color: '#00FF00',
fontSize: 14,
left: 10
}
]
});上面的接口，能够满足绝大多数的需求，然则另有一些特别的界面，经由过程H5代码掌握天生导航组件这类体式格局达不到需求：
如上图所示，界面含有tab，且能够摆布滑动切换，tab题目的下划线会随着手势摆布滑动。大多见于app的首页（mainActivity）或许分频道首页，这类界面平常采纳定制webview的做法：定制的导航组件和内容框架（为了支撑摆布滑动手势），H5翻开此类界面平常也是开特别的API：
// /h5/pages/index.js
// 开打音乐频道下“我的音乐”tab
JSBridge.view.openMusic({'tab': 'personal'});这类翻开特别的界面的API之所以特别，是由于它内部要么是纯Native完成，要么是和某个商定的html文件绑定，挪用时翻开指定的html。假定这个例子中，tab内容是H5的，假如H5是SPA架构的那末openMusic({'tab': 'personal'})则对应/music.html#personal这个url，反之多页面的则能够对应/mucic-personal.html。
至于平常的翻开新界面，则有两种能够：
app内H5界面
指的是由app开辟者开辟的H5页面，也等于app的功用界面，平常相互跳转须要转场动画，翻开体式格局是采纳Native供应的接口翻开，比方：JSBridge.view.openUrl({ url: '/music-list.html', title: '音乐列表' });再合营下面行将提到的离线接见体式格局，基础能够做到模仿Native界面的效果。第三方H5页面
指的是app内嵌的第三方页面，平常由`a`标签直接翻开，没有转场动画，然则请求翻开webview默许的汗青列表，以避免翻开多个链接后点回退直接回到Native主界面。
体系级UI组件采纳Native
基于以下缘由，一些通用的UI组件，如alert、toast等将采纳Native来完成：
H5自身有这些组件，然则平常比较大略，不能和APP UI作风一致，须要再定制，比方alert组件背景增添遮罩层
H5来完成这些组件偶然会存在坐标、尺寸计算误差，比方笔者之前遇到的是页面load非常须要挪用对话框组件提醒，然则这时刻页面高度为0，所以会涌现弹窗“消逝”的征象
这些组件平常功用单一然则通用，合适做成公用组件整合到HybridApi里边
下面代码演示H5挪用Native供应的UI组件：
JSBridge.ui.toast('Hello world!');默许界面采纳Native
由于H5是在H5容器里举行加载和衬着，所以Native很轻易对H5页面的行动举行监控，包含进度条、loading动画、404监控、5xx监控、收集诊断等，而且在H5加载非常时供应默许界面供用户操纵，防备APP“假死”。
下面是微信的5xx界面示意：
设想H5容器
Native除了担任部份界面开辟和大众UI组件设想以外，作为H5的runtime，H5容器是hybrid架构的中心部份，为了让H5运转更疾速稳固和硬朗，还应该供应并但不局限于下面几方面。
H5离线接见
之所以挑选hybrid体式格局来开辟，个中一个缘由就是要处理webapp接见慢的题目。纵然我们的H5机能优化做的再好服务器在牛逼，遇到蜗牛一样的运营商收集你也没辙，偶然候还会遇到地痞运营商再给webapp插点广告。。。哎说多了都是泪。
离线接见，望文生义就是将H5预先放到用户手机，如许接见时就不会再走收集从而做到看起来和Native APP一样的快了。
然则离线机制绝不是把H5打包解压到手机sd卡这么简朴粗犷，应该处理以下几个题目：
H5应该有线上版本
作为接见离线资本的降级计划，当当地资本不存在的时刻应该走现网去拉取对应资本，保证H5可用。别的就是，关于H5，我们不会把一切页面都运用离线接见，比方运动页面，这类疾速上线又疾速下线的页面，设想离线接见体式格局开辟周期比较高，也有多是页面完全是动态的，差别的用户在差别的时候看到的页面不一样，没法落地成静态页面，另有一类就是一些申明类的静态页面，更新频次很小的，也没必要做成离线占用手机存储空间。开辟调试&抓包
我们晓得，基于file协定开辟是完全基于开辟机的，代码必需寄存于物理机械，这意味着修正代码须要push到sd卡再看效果，虽然能够经由过程假链接接见开辟机当地server宣布时移除的体式格局，然则个人以为照样太贫苦易失足。
为了完成统一资本的线上和离线接见，Native须要对H5的静态资本请求举行阻拦推断，将静态资本“映照”到sd卡资本，即完成一个处置惩罚H5资本的当地路由，完成这一逻辑的模块临时称之为Local Url Router，详细完成细节在文章背面。
H5离线动态更新机制
将H5资本安排到当地离线接见，最大的应战就是当地资本的动态更新怎样设想，这部份能够说是最庞杂的了，由于这同时涉及到H5、Native和服务器三方，掩盖式离线更新示意图以下：
诠释下上图，开辟阶段H5代码能够经由过程手机设置HTTP代办体式格局直接接见开辟机。完成开辟以后，将H5代码推送到治理平台举行构建、打包，然后治理平台再经由过程事前设想好的长衔接通道将H5新版本信息推送给客户端，客户端收到更新指令后最先下载新包、对包举行完全性校验、merge回当地对应的包，更新完毕。
个中，治理平台推送给客户端的信息重要包含项目名（包名）、版本号、更新战略（增量or全量）、包CDN地点、MD5等。
平常来讲，H5资本分为两种，常常更新的营业代码和不常常更新的框架、库代码和公用组件代码，为了完成离线资本的同享，在H5打包时能够采纳分包的战略，将公用部份零丁打包，在当地也是零丁寄存，分包及兼并示意图：
Local Url Router
离线资本更新的题目处理了，剩下的就是怎样运用离线资本了。
上面已提到，关于H5的请求，线上和离线采纳雷同的url接见，这就须要H5容器对H5的资本请求举行阻拦“映照”到当地，即Local Url Router。
Local Url Router重要担任H5静态资本请求的分发（线上资本到sd卡资本的映照），然则不管是白名单照样过滤静态文件范例，Native阻拦划定规矩和映照划定规矩将变得比较庞杂。这里，阿里去啊app的思绪就比较赞，我们自创一下，将映照划定规矩交给H5去天生：H5开辟完成以后会扫描H5项目然后天生一份线上资本和离线资本途径的映照表（souce-router.json），H5容器只需担任剖析这个映照表即可。
H5资本包解压以后在当地的目次构造相似：
$ cd h5 && tree
.
├── js/
├── css/
├── img/
├── pages
│ ├── index.html
│ └── list.html
└── souce-router.jsonsouce-router.json的数据构造相似：
{
"protocol": "http",
"host": "o2o.xx.com",
"localRoot": "[/storage/0/data/h5/o2o/]",
"localFolder": "o2o.xx.com",
"rules": {
"/index.html": "pages/index.html",
"/js/": "js/"
}
}H5容器阻拦到静态资本请求时，假如当地有对应的文件则直接读取当地文件返回，不然提议HTTP请求猎取线上资本，假如设想完全一点还能够斟酌同时开启新线程去下载这个资本到当地，下次就走离线了。
下图演示资本在app内部的接见流程图：
个中proxy指的是开辟时手机设置代办http代办到开辟机。
数据通道
上报
由于界面由H5和Native共同完成，界面上的用户交互埋点数据最好由H5容器一致收集、上报，另有，由页面跳转发生的阅读轨迹（转化漏斗），也由H5容器纪录和上报
ajax代办
因ajax受同源战略限定，能够在hybridApi层对ajax举行一致封装，同时兼容H5容器和阅读器runtime，采纳更高效的通讯通道加快H5的数据传输
Native对H5的扩大
重要指扩大H5的硬件接口挪用才能，比方屏幕扭转、摄像头、麦克风、位置服务等等，将Native的才能经由过程接口的情势供应给H5。
综述
最厥后张图总结下，hybrid客户端团体架构图：
个中的Synchronize Service模块示意和服务器的长衔接通讯模块，用于接收服务器端种种推送，包含离线包等。Source Merge Service模块示意对解压后的H5资本举行更新，包含增添文件、以旧换新以及删除逾期文件等。
能够看到，hybrid情势的app架构，最中心和最难的部份都是H5容器的设想。
