请选择 进入手机版 | 继续访问电脑版
查看: 670|回复: 0

H5容器技术方案

[复制链接]

353

主题

373

帖子

9万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
99935
发表于 2017-11-23 16:51:06 | 显示全部楼层 |阅读模式
Native开发原生应用是手机操作系统厂商(目前主要是苹果的iOS和google的Android)对外界提供的标准化的开发模式,他们对于native开发提供了一套标准化实现和优化方案。但是他们存在一些硬伤,比如App的发版周期偏长、有时无法跟上产品的更新节奏;灵活性差,如果有较大的方案变更,需要发版才能解决;如果存在bug,在当前版本修复的难度比较大(iOS的JSPatch方案和Android的Dex修复方案);需要根据不同的平台写不同的代码,iOS主要为object-c和swift,android为Java。

APP端的迭代过程中的最后一步,需要提交版本到应用市场(AppStore或安卓各市场)。APP端的需求中有一部分会有更新频繁、业务需求动态等特点,需要用户能够及时更新。该场景下,H5能够满足此类特性的需求(更快、更简便的服务,代码可高度重用,服务发布方便等优点),能够做到快速承载业务的更新,多端开发统一。因此现在越来越多的公司使用H5+Native的Hybrid模式来开发APP。本文通过设计一种H5容器,在完成H5页面的远端载入之外,提供对H5页面访问加速、提高安全性的支持。同时设计H5的模版化,离线化完成H5页面访问加速;还有Native与H5的请求委托,将鉴权信息等部分接口委托至APP端,增加安全性。


方案概述

1. H5页面模版化、离线化

H5页面分为静态、动态数据部分;目的是可以通过在APP端预先加载模版(静态资源通过脚本自动打包到应用,首次安装解压处理),只请求动态数据部分,减少并发的请求数量,提高速度。


2. 模版打包
H5页面除了动态数据部分,其他内容包括js、css、img等静态资源预先被打包成模版包,同时APP端在合适的时机进行下载并缓存在本地。如果模版更新频繁、全包的尺寸较大,应将公共资源单独抽离,并采用增量包更新方式。


3. 模版更新策略
更新时机:推送通知(客户端静默更新)、app启动、app回到  前台、定时周期性检测更新、添加对象作为资源更新的监听器更新模版,提供多维度的更新策略。(后期考虑基于长连接的消息推送更新模版)
更新策略:远程模版配置和本地模版配置在模版版本和模版有效期上的比较。同时增加对模版的md5校验,防止资源的篡改。


4. 资源拦截
H5容器加载模版,会加载引用的js、css、img等文件,H5容器需要对该类文件进行拦截,返回资源包中对应的文件;为了找到资源包中对应的文件,需要提供一份静态资源的映射配置表。


5. JsBridge通道
实现Native与H5页面的交互:业务协议接口的定义,管理页      面切换,与服务器的数据交互,APP端通用功能等。Native与H5的请求委托,将鉴权信息等部分接口委托至APP端,增加安全性。


6. 日志统计
包括H5性能指标,模版包的更新成功率,以及本地模版和远程页面访问的占比,和一些异常日志的收集,然后统计上报,提供完善的日志统计。

详细方案


1. 主流程
H5容器方案包括两个主流程:
·       模版更新流程:包括后端cms上传及app同步
·       模版访问流程:设计App识别并访问模版,H5与JS交互的流程

发布流程
模版发布流程如下图所示:




·       确定模版更新,并通知到QA
·       QA测试模版包,确认无误
·       提交发布测试人,上传CMS(上传模版包至阿里云)
·       CMS调用MobileServer接口,存入系统
·       等待APP端同步到本地


模版加载时序图:




2. 模版分类及识别
模版分类通过业务场景设定,并且可以通过wap url的特定字符串设别,例如:http://host/yougouPages/Cart?xxx=111
其中yougouPages/Cart即模版识别串(detectKey),容器加载到该url后,通过detectKey确定是否加载已经存在的对应的模版。


3. 配置信息管理
所有模版在MobileServer上维护一份信息(templateInfo)
包括全量包和增量包下载地址,模版包的版本,识别字符串,模版id,模版更新时间戳,模版有效截止时间戳,模版状态(用于下线模版识别,解决突发问题)


4. APP端H5容器对离线资源的重定位
模版资源打包时,需要形成一份url->localPath的映射表:


后续考虑对资源映射进行加密处理,防止被篡改。



5. H5与APP交互
考虑到H5对APP端的硬件信息、鉴权信息,请求信息等的依赖,H5Container需要为H5提供接口,提供对应的信息。所有通过模版加载的url,带上额外参数http://host/subpath?&ish5container=1,H5页面可根据该参数确定相应的初始化工作。
时序图:






6. JsBridge接口描述
JsBridge作为native与js的信息交互的通道。提供最基本的方法调用的接口。APP需要进行业务维度的封装,暴露出接口。




7. 模版使用策略
模版的使用过程,在某些情况下不适合使用模版,或为了解决模版在特定场景有问题,决定停止使用。因此需要定义模版的使用条件。模版配置信息增加:vaildTs,offine,exception




8. 容器性能指标





9. 容器增量包方案


10. 框架结构





11.H5容器构成

回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

快速回复 返回顶部 返回列表