Skip to content

Commit fed4f38

Browse files
committed
校对
1 parent 55f00b7 commit fed4f38

File tree

1 file changed

+6
-6
lines changed

1 file changed

+6
-6
lines changed

issues/hybrid_arch.md

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -108,7 +108,7 @@ JSBridge.util.compassImage('http://cdn.foo.com/images/bar.png', function(r) {
108108

109109
对于这些界面,降级的方案也有,就是HTTPS。但是想说的是在国内的若网络环境下,HTTPS的体验实在是不咋地(主要是慢),而且只能走现网不能走离线通道。
110110

111-
另外,H5本身的动画开发成本比较高,在低端机器上可能有些绕不过的性能坎,原生js对于手势的支持也比较弱,因此对于这些类型的界面,可以选择使用Native来实现,这也是Native本身的有时不是。比如要实现下面这个音乐播放界面,用H5开发门槛不小吧,留意下中间的波浪线背景,手指左右滑动可以切换动画。
111+
另外,H5本身的动画开发成本比较高,在低端机器上可能有些绕不过的性能坎,原生js对于手势的支持也比较弱,因此对于这些类型的界面,可以选择使用Native来实现,这也是Native本身的优势不是。比如要实现下面这个音乐播放界面,用H5开发门槛不小吧,留意下中间的波浪线背景,手指左右滑动可以切换动画。
112112

113113
![layout ui1](https://raw.githubusercontent.com/chemdemo/chemdemo.github.io/master/img/hybrid/layout_1.png)
114114

@@ -230,15 +230,15 @@ Native除了负责部分界面开发和公共UI组件设计之外,作为H5的r
230230

231231
我们知道,基于file协议开发是完全基于开发机的,代码必须存放于物理机器,这意味着修改代码需要push到sd卡再看效果,虽然可以通过假链接访问开发机本地server发布时移除的方式,但是个人觉得还是太麻烦易出错。
232232

233-
为了实现同一资源的线上和离线访问,Native需要对H5的静态资源请求进行拦截判断,将静态资源“映射”到sd卡资源,即实现一个处理H5资源的本地路由,暂且称之为`Local Url Router`下一节是具体实现
233+
为了实现同一资源的线上和离线访问,Native需要对H5的静态资源请求进行拦截判断,将静态资源“映射”到sd卡资源,即实现一个处理H5资源的本地路由,实现这一逻辑的模块暂且称之为`Local Url Router`具体实现细节在文章后面
234234

235235
### H5离线动态更新机制
236236

237237
H5资源放置到本地离线访问,最大的挑战就是本地资源的动态更新如何设计,这部分可以说是最复杂的了,因为这同时涉及到H5、Native和服务器三方,覆盖式离线更新示意图如下:
238238

239239
![workflow](https://raw.githubusercontent.com/chemdemo/chemdemo.github.io/master/img/hybrid/workflow.png)
240240

241-
解释下上图,开发阶段H5代码可以通过HTTP代理方式直接访问开发机。完成开发之后,将H5代码推送到管理平台进行构建、打包,然后管理平台再通过事先设计好的长连接通道将H5新包信息推送给客户端,客户端收到更新指令后开始下载新包、对包进行完整性校验、merge回本地对应的包,更新结束。
241+
解释下上图,开发阶段H5代码可以通过手机设置HTTP代理方式直接访问开发机。完成开发之后,将H5代码推送到管理平台进行构建、打包,然后管理平台再通过事先设计好的长连接通道将H5新版本信息推送给客户端,客户端收到更新指令后开始下载新包、对包进行完整性校验、merge回本地对应的包,更新结束。
242242

243243
其中,管理平台推送给客户端的信息主要包括项目名(包名)、版本号、更新策略(增量or全量)、包CDN地址、MD5等。
244244

@@ -248,9 +248,9 @@ Native除了负责部分界面开发和公共UI组件设计之外,作为H5的r
248248

249249
### Local Url Router
250250

251-
到目前为止,离线资源更新的问题解决了,剩下的就是如何使用离线资源了。
251+
离线资源更新的问题解决了,剩下的就是如何使用离线资源了。
252252

253-
上面已经提到,对于H5的请求,线上和离线采用相同的url访问,这就需要H5容器对H5的资源请求进行拦截“映射”到本地,暂且将实现这一逻辑的模块成为`Local Url Router`
253+
上面已经提到,对于H5的请求,线上和离线采用相同的url访问,这就需要H5容器对H5的资源请求进行拦截“映射”到本地,`Local Url Router`
254254

255255
Local Url Router主要负责H5静态资源请求的分发(线上资源到sd卡资源的映射),但是不管是白名单还是过滤静态文件类型,Native拦截规则和映射规则将变得比较复杂。这里,[阿里去啊app](http://www.infoq.com/cn/presentations/look-the-fusion-of-web-and-native-from-the-architecture-evolution-of-alitrip)的思路就比较赞,我们借鉴一下,将映射规则交给H5去生成:H5开发完成之后会扫描H5项目然后生成一份线上资源和离线资源路径的映射表(souce-router.json),H5容器只需负责解析这个映射表即可。
256256

@@ -285,7 +285,7 @@ souce-router.json的数据结构类似:
285285

286286
H5容器拦截到静态资源请求时,如果本地有对应的文件则直接读取本地文件返回,否则发起HTTP请求获取线上资源,如果设计完整一点还可以考虑同时开启新线程去下载这个资源到本地,下次就走离线了。
287287

288-
下图反应了资源在app内部的访问流程图
288+
下图演示资源在app内部的访问流程图
289289

290290
![url router](https://raw.githubusercontent.com/chemdemo/chemdemo.github.io/master/img/hybrid/url-router.png)
291291

0 commit comments

Comments
 (0)