@@ -108,7 +108,7 @@ JSBridge.util.compassImage('http://cdn.foo.com/images/bar.png', function(r) {
108
108
109
109
对于这些界面,降级的方案也有,就是HTTPS。但是想说的是在国内的若网络环境下,HTTPS的体验实在是不咋地(主要是慢),而且只能走现网不能走离线通道。
110
110
111
- 另外,H5本身的动画开发成本比较高,在低端机器上可能有些绕不过的性能坎,原生js对于手势的支持也比较弱,因此对于这些类型的界面,可以选择使用Native来实现,这也是Native本身的有时不是 。比如要实现下面这个音乐播放界面,用H5开发门槛不小吧,留意下中间的波浪线背景,手指左右滑动可以切换动画。
111
+ 另外,H5本身的动画开发成本比较高,在低端机器上可能有些绕不过的性能坎,原生js对于手势的支持也比较弱,因此对于这些类型的界面,可以选择使用Native来实现,这也是Native本身的优势不是 。比如要实现下面这个音乐播放界面,用H5开发门槛不小吧,留意下中间的波浪线背景,手指左右滑动可以切换动画。
112
112
113
113
![ layout ui1] ( https://raw.githubusercontent.com/chemdemo/chemdemo.github.io/master/img/hybrid/layout_1.png )
114
114
@@ -230,15 +230,15 @@ Native除了负责部分界面开发和公共UI组件设计之外,作为H5的r
230
230
231
231
我们知道,基于file协议开发是完全基于开发机的,代码必须存放于物理机器,这意味着修改代码需要push到sd卡再看效果,虽然可以通过假链接访问开发机本地server发布时移除的方式,但是个人觉得还是太麻烦易出错。
232
232
233
- 为了实现同一资源的线上和离线访问,Native需要对H5 的静态资源请求进行拦截判断,将静态资源“映射”到sd卡资源,即实现一个处理H5 资源的本地路由,暂且称之为 ` Local Url Router` ,下一节是具体实现 。
233
+ 为了实现同一资源的线上和离线访问,Native需要对H5 的静态资源请求进行拦截判断,将静态资源“映射”到sd卡资源,即实现一个处理H5 资源的本地路由,实现这一逻辑的模块暂且称之为 ` Local Url Router` ,具体实现细节在文章后面 。
234
234
235
235
### H5 离线动态更新机制
236
236
237
237
将H5 资源放置到本地离线访问,最大的挑战就是本地资源的动态更新如何设计,这部分可以说是最复杂的了,因为这同时涉及到H5 、Native和服务器三方,覆盖式离线更新示意图如下:
238
238
239
239
! [workflow](https: // raw.githubusercontent.com/chemdemo/chemdemo.github.io/master/img/hybrid/workflow.png)
240
240
241
- 解释下上图,开发阶段 H5 代码可以通过 HTTP 代理方式直接访问开发机 。完成开发之后,将H5 代码推送到管理平台进行构建、打包,然后管理平台再通过事先设计好的长连接通道将 H5 新包信息推送给客户端 ,客户端收到更新指令后开始下载新包、对包进行完整性校验、merge回本地对应的包,更新结束。
241
+ 解释下上图,开发阶段 H5 代码可以通过手机设置 HTTP 代理方式直接访问开发机 。完成开发之后,将H5 代码推送到管理平台进行构建、打包,然后管理平台再通过事先设计好的长连接通道将 H5 新版本信息推送给客户端 ,客户端收到更新指令后开始下载新包、对包进行完整性校验、merge回本地对应的包,更新结束。
242
242
243
243
其中,管理平台推送给客户端的信息主要包括项目名(包名)、版本号、更新策略(增量or全量)、包CDN 地址、MD5 等。
244
244
@@ -248,9 +248,9 @@ Native除了负责部分界面开发和公共UI组件设计之外,作为H5的r
248
248
249
249
### Local Url Router
250
250
251
- 到目前为止, 离线资源更新的问题解决了,剩下的就是如何使用离线资源了。
251
+ 离线资源更新的问题解决了,剩下的就是如何使用离线资源了。
252
252
253
- 上面已经提到,对于H5 的请求,线上和离线采用相同的url访问,这就需要H5 容器对H5 的资源请求进行拦截“映射”到本地,暂且将实现这一逻辑的模块成为 ` Local Url Router` 。
253
+ 上面已经提到,对于H5 的请求,线上和离线采用相同的url访问,这就需要H5 容器对H5 的资源请求进行拦截“映射”到本地,即 ` Local Url Router` 。
254
254
255
255
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容器只需负责解析这个映射表即可。
256
256
@@ -285,7 +285,7 @@ souce-router.json的数据结构类似:
285
285
286
286
H5 容器拦截到静态资源请求时,如果本地有对应的文件则直接读取本地文件返回,否则发起HTTP 请求获取线上资源,如果设计完整一点还可以考虑同时开启新线程去下载这个资源到本地,下次就走离线了。
287
287
288
- 下图反应了资源在app内部的访问流程图 :
288
+ 下图演示资源在app内部的访问流程图 :
289
289
290
290
! [url router](https: // raw.githubusercontent.com/chemdemo/chemdemo.github.io/master/img/hybrid/url-router.png)
291
291
0 commit comments