一、Dhybird简介
Dhybird是一款移动端Web Runtime的跨平台开发方案，支持基于HTML5和Javascript创建类似于移动端原生应用。该方案主要对Web运行环境进行优化，最大限度的挖掘Web性能，以及提供丰富的原生APIs供Javascript调用(或监听)。
-
超强的扩展能力。通过DPlugin，DWebView等接口，可以扩展DHytive，实现业务特有的功能。
-
丰富的Dhybird基础插件。 Dhybird本身已经提供了丰富的插件，针对各种业务场景，都有相应的插件来帮助webapp实现相应的功能，同时我们提供了一套通用的api，即DahaiApi
-
资源管理的解决方案。Dhybird的demo提供了包括h5资源包通过配置的下载、解压缩、更新以及通过Dhybird加载的机制，参考demo可以让你灵活制订属于自己的专属资源管理方案。
二、Dhybird要解决的问题
目前大海客户端内有若干业务页面使用webview内加载h5页面承载。其优点是显而易见的，即：web页面上线频度满足快速迭代的业务需求，不受客户端审核和发版的时间限制，也可以将各个业务线的开发工作分摊到各个业务的fe团队上，使得个业务线可以并行开发。
而缺点，则不言而喻的在于客户端内webview加载h5页面，准确来说是web应用的性能和体验，是肯定不及客户端的。本篇文章中，我将会梳理立足于本团队内，根据团队的特点和制约，设计一套可行的hybird应用以及资源管理系统。
三、Dhybird的整体框架
整体层次
四、各个端需要提供的支持
FE
现今绝大部分团队内的端内web应用，均是由webpack构建打包而成的单页或多页web应用，前端工程构建完成的结果中应该可以看出其静态资源中，不乏体积几百k~几m不等，而这些静态资源均是首次打开页面时需要下载的，并且在web应用有更新时，这些静态资源文件均会发生变化，也需要重新下载。这样就会导致首次打开线上h5资源更新网络条件差的时候，或者本地页面缓存失效的时候出现webView加载不出来东西。这使得移动端网页体验像一块巨石—它包含了大量 CPU 计算的 JavaScript 包，拖延了页面的加载和可交互的速度。 而对于任何一家互联网公司，性能往往与利益直接相关。 面对海量的交易用户，提升web应用加载的体验成为了FE和APP工程师极力重视解决的一个问题。
h5资源加载慢
- 前端构建
建议采用腾讯alloy团队出品的webpack离线包插件：ak-webpack-plugin，其可以根据配置，将webpack的构建出的h5资源包，压缩成映射了h5资源在cdn路径url的zip压缩包。 - 前端发布
建议采用持续集成和发布工具jenkins进行生成和部署h5资源包的操作。
QA
QA主要进行h5资源管理平台的开发
对于接入了h5资源管理系统的各个业务线的前端工程生成的不同时间版本的h5资源包 ，我们需要有一个直观明晰的方案来对其进行管理。 我们需要开发离线资源管理平台，对接离线后台系统。
主要功能建议有
- 灰度
- 查询
- 资源包上下线和回滚
- 日志系统
-
存储系统
h5资源管理平台
Server
server主要提供配置服务的Api和给APP端进行下发配置
主要功能建议有
- 配置服务api
- 压力测试
-
性能监控
配置json
APP
app侧资源管理模块和加载模块
主要功能应该有
- 配置更新模块
- 资源下载引擎
- 资源解压缩和加载引擎
五、TODO
目前app端的基本功能已经开发完成，但还有很多优化工作需要继续进行
- 下载引擎的优化 。目前还待实现的功能有h5资源包下载的断点续传和分块下载的功能，以及下载失败后重试的逻辑。
- 离线资源下载的统计。
- 命名！
网友评论