ZAMP——众安国际H5离线包开发平台设计与实践

见贤思齐

ZAMP——众安国际H5离线包开发平台设计与实践 Wesley/Bruce 众安国际技术团队 众安国际技术团队 众安(深圳)科技咨询服务有限公司 众安国际，官方技术号。分享技术在国际金融领域落地的点点滴滴。 8篇内容 2022年11月23日 17:00 广东 【2022年 第7篇】随着众安国际的金融业务线拓展与增长，此时需要在众安银行的Bank APP当中支持大量的业务，其中包含着的巨量的营销业务场景。越来越多的营销类业务具有高度的动态化与复杂性的特点，如果采用ALL In Native 传统的开发模式和固定周期的发版模式，已经很难再应满足业务快速发展与复杂业务协同需求。H5 页面以其天然的跨端性,普适的技术标准(TS&JS&W3C)以及极具优势的动态灵活性研发与发布特点，成为部分业务线首选技术栈。但传统的 H5 + Hybrid架构容易受网络的影响，尤其在弱网的情况下，页面的稳定性和可用性以及性能会指数级下降，从而影响用户体验和用户业务的正常开展。因此在BANK APP 在H5研发体系中面临的挑战，总结为以下三点：如何应对复杂的业务协同需求？如何满足业务方自行定制发布计划，自行指定发布标准，自行发布的并发发布模式，进而来满足业务的快速迭代与动态发布的需求？如何来保障与监控大规模使用H5 + Hybrid开发模式下页面的可用性与性能体验？01项目目标 为应对以上提出的问题与挑战，我们需要实现以下目标：提升在Bank APP中H5 + Hybrid 应用的稳定性与渲染性能支持业务部门快速生产和多维度发布离线H5应用建立性能H5页面前端性能与稳定性指标与分析平台，实现可实时度量与监控线上H5页面的稳定性和前端性能数据02方案设计 构建APP H5 技术架构离线包产品技术解决方案，致力于构建金融级H5离线架构移动开发平台，助力移动端应用轻松实现动态发布和跨端投放，赋能业务快速搭建流畅、稳定、高体验的H5应用。1. 引入离线包SDK，构建端侧离线缓存能力在Bank APP 中引入众安国际&众安科技直营团队共建的离线包SDK，从而让BANK APP 具有离线H5资源的能力，通过离线包SDK，将原有从线上加载的 HTML5 应用，提前下发到本地，通过读取 IO或者内存进行页面渲染，以达到接近原生的用户体验2. 通过构建离线开发平台，输出H5离线包应用开发、发布、推送能力支持应用开发者可以将不同的 HTML5 应用，以单独应用的形式，进行不同维度的下发，使原来 ALL In Native 发布模式，改为各业务线自行定制发布计划，自行制定发布标准，自行发布的并行发布形式，来满足业务的快速迭代构建前端开发者平台，支持前端开发者在线查看开发API文档支持H5应用的性能监控采集与分析3. 通过打造前端工程化体系,构建H5侧快速开发和生产离线包能力通过打造前端工程化工具与开发框架Castor向业务部门输出生产离线H5应用的能力，为一线业务前端开发者提供统一，标准，高效的研发范式与工具体系，提升整体前端研发效率与开发体验03流程设计 1总体流程设计 1.1 离线包生产与发布流程创建离线包发布离线包 1.2 离线包推送流程端侧拉取离线包命中离线包更新离线包离线包安全生产2离线包生产与发布流程 2.1 创建离线包首先用户在创建离线包时，服务端会根据该应用下的离线包版本号信息进行自动升级，并允许用户自行修改，但必须大于现有版本；其次需要选择本次版本的离线包的平台和对应的平台版本范围，以及下载时机和安装时机；将准备好的离线包通过文件服务上传到阿里云OSS并返回CDN地址，最后统一提交到服务器落库。 2.2 发布离线包客户端消费的离线包是包括了H5代码资源和配置文件，配置文件是这个离线包的使用说明，告知离线包自身信息和使用条件。上面创建离线包过程并没有生成客户端可消费的离线包，主要是因为文件的上传下载以及服务端组装离线包的过程比较耗时，用户在等待这个过程中并不知道结果，所以生成离线包的过程为服务器异步过程。首先要从OSS中把已经上传的文件下载到服务器中，同时将前面提交的信息如离线包版本、平台及版本范围之类的条件信息，以及H5信息，写入一个配置文件，用于标记此离线包自身信息和可运行的环境信息。然后将此配置文件与用户上传的离线包文件合并成一个zip包，最后上传到阿里云OSS，此离线包则可用于客户端消费。当然，为了确保客户端的安全可靠，需要获取离线包的哈希值并落库，以便客户端校验其完整性。3离线包推送流程 3.1 拉取离线包在用户冷启动APP或者命中离线包的时候，APP会将自己的包名、平台、版本号等客户端信息以及本地已经用拥有的离线包信息向服务端发起updateInfo接口请求，服务端根据请求信息解析出客户端信息和本地已经拥有的离线包信息，对比版本后下发需要更新和下载的离线包列表，客户端根据下发的离线包地址，从CDN下载到本地，覆盖原有离线包。3.2 命中离线包服务端会在h5Info接口里下发H5应用的黑白名单域名、路径正则、状态等信息，同时也下发该APP的离线包启禁用状态，客户端在拦截到H5应用的域名在白名单里时就将域名和路径正则一起比较，如果匹配上并查找到本地离线包资源则命中离线包。3.3 更新离线包更新离线包机制基本和拉取离线包相似，除了APP启动的时候会调用updateInfo接口下载更新离线包外，还在匹配上离线包规则后发起newInfo接口请求，该接口会将本地该H5应用的离线包信息上传到服务器，服务器通过层层判断是否要更新该离线包。3.4 离线包安全生产用户冷启动APP的时候会向服务器发起一个H5Info的请求查询H5应用的配置和状态，接口会返回H5应用的域名、路径正则、状态等信息，同时也下发该APP的状态，如果发现APP状态已经禁用离线包，则整个APP都不会命中离线包，如果某个H5应用被禁用则该H5应用不会命中离线包。如果离线包功能有严重的线上问题，而离线包服务又宕机了，无法通过离线包服务禁用APP或者某个H5应用，则可以通过独立于离线包服务的APP配置服务下发禁用指令，及时止血，确保端侧安全。3.5 Fallback机制所有离线包均有其对应的在线版本，只要端侧无法命中离线包或者离线包资源不可用或者希望用户使用的是最新的资源等本地离线包不满足期望的情况下，将自动让H5 Fallback到线上。04离线vs 在线传统H5性能 1. 直观的用户体验限速 50kbs（电梯、地铁和飞机场弱网模式） 已关注 关注 重播 分享 赞 关闭观看更多更多众安国际技术团队已关注分享视频，时长00:230/000:00/00:23 切换到横屏模式 继续播放进度条，百分之0播放00:00/00:2300:23 倍速播放中 0.5倍 0.75倍 1.0倍 1.5倍 2.0倍 超清 流畅 您的浏览器不支持 video 标签 继续观看 ZAMP——众安国际H5离线包开发平台设计与实践 观看更多,ZAMP——众安国际H5离线包开发平台设计与实践众安国际技术团队已关注分享点赞在看已同步到看一看写下你的评论 视频 2. 性能指标的建立根据浏览器的渲染的流程，我们选取了如下几个性能指标，作为衡量前端页面性能关键指标Time to First Byte(TTFB)First Contentful Paint(FCP)Largest Contentful Paint (LCP)First Input Delay (FID)3. 性能数据的对比TTFB在不同网络环境下【离线/在线】版本性能数据对比FCP在不同网络环境下【离线/在线】版本性能数据对比LCP在不同网络环境下【离线/在线】版本性能数据对比FID在不同网络环境下【离线/在线】版本性能数据对比4. 对比结论基于离线架构的H5应用与基于Next.js 静态化技术架构性能对比结论：基于离线架构的H5应用，即使在弱网情况下，H5 页面依然无缝的秒出在网络较好（如WIFI网络）的环境下，离线架构H5与Next.js架构H5性能体验接近，在网络较差的环境下，离线架构H5性能体验无明显影响，而基于Next.js架构H5则受到明显的影响，此时离线架构H5性能体验明显优于Next.js架构的H5离线H5架构性能体验稳定，受网络影响小05全生命周期埋点监控 为了确保全链路清晰透明，清楚知道每个节点的健康状况和流量，我们对客户端SDK进行全链路的跟踪统计。目前已经做了对离线包全生命周期做了埋点统计，通过数据分析，可以清晰地跟踪性能指标与节点健康状况，用于指导优化现有方案的设计，优化用户体验。06落地案例 目前已经在众安国际多条业务线落地，上线了咖啡券商城中正向购买全链路、基金、营销大转盘、卡新用户专区等项目。07结语 在Native + H5 的Hybrid架构盛行的今天，离线解决方案是移动端H5性能优化的桥头堡，是收益较大，工程量也较大的方案。我们的解决案前已经持了咖啡券商城、基、转盘、卡新户专区等项，性能体验上有明显的提升。围绕离线包开发平台也建设了一系列的基础配套设施，有助于公司降本增效，提高开发者有幸福感，让用户有好的使用体验。但性能体验优化永远没有终点，我们将继续向纵深方向砥砺前行，围绕离线包开发平台建设一系列生态配套设施，提高生态协同作战能力，排除每一个制约公司降本增效、开发体验和用户体验的困难。