Native开发原生应用是手机操作系统厂商（主要是苹果的iOS和谷歌的Android）对外提供的一种标准化的开发模式。他们提供了一套Native开发的标准化实现和优化方案。但是，它们也存在一些缺点，比如App的发布周期长，有时跟不上产品的更新节奏；灵活性差，如果有重大的程序变更，需要发布解决；如果有bug，会在当前版本修复，难度比较大（iOS为JSPatch解决方案，Android为Dex修复方案）；不同的平台需要写不同的代码，iOS主要是Object-C和Swift，Android主要是Java。APP端迭代过程的最后一步是提交版本到应用市场（AppStore或Androidmarkets）。App端的部分需求会呈现更新频繁、业务需求动态的特点，这就要求用户能够及时更新。在这种场景下，H5可以满足这样的特性需求（服务更快捷简单、代码复用性高、服务发布方便等），可以快速承载业务更新，统一多端开发。因此，现在越来越多的公司采用H5+NativeHybrid的模式来开发App。本文设计了一个H5容器，除了完成H5页面的远程加载外，还为加速H5页面访问和提高安全性提供支持。同时设计H5模板，离线完成H5页面访问加速；还有Native和H5请求委托，将认证信息等一些接口委托给App端，增加安全性。方案概述H5页面模板化，离线H5页面分为静态和动态数据部分；目的是在App端预加载模板（静态资源通过脚本自动打包到应用中，第一次安装解压处理），只请求动态数据部分，减少并发请求数，提高速度。模板打包除了H5页面的动态数据部分，其他内容包括js、css、img等静态资源，都预先打包成一个模板包，App端在合适的时候下载缓存到本地。如果模板更新频繁，全包体积较大，则应将公共资源单独分离，采用增量包更新方式。模板更新策略更新时机：推送通知（客户端静默更新）、App启动、App回到前台、定期检测更新、添加对象作为资源更新监听器更新模板，提供多维度的更新策略。（以后考虑基于长连接的消息推送更新模板）更新策略：远程模板配置和本地模板配置在模板版本和模板有效期上的对比。同时增加模板的md5校验，防止资源被篡改。资源拦截H5容器加载模板会加载引用的js、css、img等文件。H5容器需要拦截此类文件，并返回资源包中对应的文件；为了在资源包中找到对应的文件，需要提供静态资源的Mapping配置表。JsBridge通道实现了Native与H5页面的交互：定义业务协议接口、管理页面切换、与服务端的数据交互、App端常用功能等。Native与H5请求将认证信息等部分接口委托给App端增加安全性。日志统计包括H5性能指标、模板包更新成功率、本地模板和远程页面访问比例，以及一些异常日志的收集，然后统计上报，提供全面的日志统计。详细方案1.主要流程H5容器方案包括两个主要流程：模板更新流程：包括后台cms上传和App同步模板接入流程：设计App识别和接入模板，H5与JS交互流程发布流程模板发布流程如下如图：确认模板更新，并通知QAQA测试模板包，确认无误后提交给测试人员，上传CMS（将模板包上传到阿里云），调用从CMS获取MobileServer接口，存储在系统中，等待App同步到本地模板加载顺序图：2.模板分类识别模板分类通过业务场景设置，可以通过特定的wap字符串进行识别url，例如：http://host/yougouPages/Cart?...其中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?&ish5cont...，H5页面可以根据这个参数来决定相应的初始化工作。时序图：6.JsBridge接口说明JsBridge作为Native与js进行信息交互的通道，提供最基本的方法调用接口。App需要封装业务维度，暴露接口。7.模板使用策略模板的使用过程在某些情况下不适合使用模板，或者在特定场景下为了解决问题而决定停止使用模板。因此，有必要定义模板的使用条件。新增模板配置信息：vaildTs、offine、exception。随着音频处理和压缩技术的不断发展，必然会出现效果更好、应用范围更广、性能更高的算法和新技术。如果你有好的技术或者分享，请关注网易MC官博和微信公众号：更多技术内容关注：网易云信博客欢迎访问网易云信GitHub欢迎访问网易云信官网微信公众号：
