H5容器技术方案 | WebRTC编风网
0

H5容器技术方案

已有 187 人阅读此文 - - 网易视频云(微信ID:vcloud163) - 陶金亮(网易视频云资深开发工程师)

一、现状

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交互的流程

发布流程

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

1· 确定模版更新,并通知到QA· QA测试模版包,确认无误

· 提交发布测试人,上传CMS(上传模版包至阿里云)

· CMS调用MobileServer接口,存入系统

· 等待APP端同步到本地

模版加载时序图

2

2.模版分类及识别

模版分类通过业务场景设定,并且可以通过wap url的特定字符串设别。

例如:http://host/yougouPages/Cart?xxx=111

其中yougouPages/Cart即模版识别串(detectKey),容器加载到该url后,通过detectKey确定是否加载已经存在的对应的模版。

3.配置信息管理

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

4.APP端H5容器对离线资源的重定位

模版资源打包时,需要形成一份url->localPath的映射表

3

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

5.H5与APP交互

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

时序图

4

6.JsBridge接口描述

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

5

7.模版使用策略

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

6

8.容器性能指标

7

3e3a17e

9.容器增量包方案

8

10.框架结构

14824811901

11.H5容器构成

10

 

1
相关文章!