1.前言
货拉拉自研H5离线包SDK，能显著提高H5翻开速度，已在多个事务中落地。车型介绍页运用离线包前后翻开效果如下：
| 图1 运用离线包前 | 图2 运用离线包后 |
|---|---|
货拉拉自研离线包具有如下特色：
安全可靠：无hook，无私有API，三重降级战略。
简单保护：三层架构形式和模块化规划。
功用齐备：功用可装备，数据埋点，开发者工具等功用一应俱全。
开源代码地址：github.com/HuolalaTech…
团队介绍：货拉拉移动技能团队/user/176848…
2.布景
Web 技能信任大家十分了解，它具有快速迭代发布的天然优势，在货拉拉App中广泛运用，比如金秋拉货节、余额、车型介绍页等，但也存在加载速度慢，体会差等问题。现在优化Web页面体会计划比较多，有Flutter、React Native、小程序、离线包，其中离线包技能对现有H5页面改造本钱小，技能最为成熟和安稳。
3.职业计划
腾讯开源了离线包计划VasSonic（github.com/Tencent/Vas…
| 计划名 | 长处 | 缺陷 | 备注 |
|---|---|---|---|
| 加载本地路径 | 简单可靠，无需hook和调用私有API | 有跨域问题，影响cookie和localstorage，H5需做少数改动 | 货拉拉计划 |
| 恳求阻拦 | 不修正加载URL，没有跨域问题，且支撑网页部分资源离线化，灵活性和兼容性好 | iOS端现在提供的NSURLProtocal和WKSURLSchemehandler阻拦计划有缺陷，前期完本钱钱高 | www.jianshu.com/p/8f5e1082f… 网易云音乐计划zhuanlan.zhihu.com/p/347592487 |
| 本地Web Server | 兼容性好 | 对客户端耗电和CPU功用有影响 | 暂未发现有公司选用，/entry/68449… |
| Service Worker | 前端兼容性好 | iOS端WKWebView不提供官方支撑，完结技能难度大 | 爱奇艺计划zhuanlan.zhihu.com/p/148931732 |
上述几种计划，本地树立Web Server方法对客户端功用影响大，先排除，Service Worker计划因为iOS端不支撑，不考虑。资源阻拦计划兼容性好，但需求处理WKWebview阻拦网络恳求难度大的问题，开发和测验作业量大，暂不必。结合完本钱钱和技能可靠性最后采纳加载本地路径的计划。
4. 技能完结
H5离线包的基本原理是将html、js、css、图片等静态资源打包成压缩包，然后下载到客户端并解压，H5加载时直接从本地读取静态资源文件，减少网络恳求，提高速度。加载本地文件路径存在的问题和处理方法：
| 存在问题 | 处理方法 |
|---|---|
| cgi恳求跨域问题 | 在网关或者后端服务的跨域恳求头添加null域支撑 |
| cookie跨域问题 | 现在静态js中无cookie操作，没有cookie跨域问题 |
| localstorage跨域问题 | 暂时不涉及域名隔离问题，假如有需求，采纳调用原生的方法处理 |
| 绝对路径问题离线形式不支撑问题 | 改成相对路径 |
4.1 整体流程
如下图所示：
客户端发动后，先去长途装备服务器拉取离线包相关的功用装备，然后查看更新，假如有更新则下载离线包。webview加载时，假如本地缓存射中，则从本地磁盘加载html、js、css、图片等静态资源。
H5离线包和线上H5类似也能进行更新和晋级，有三个更新机遇：
1）webview容器翻开时更新。敞开离线包功用的H5页面每次翻开时，会去查看对应的离线包是否有更新。假如有更新，则下载离线包到本地，绝大部分场景是下次翻开时收效。
2）发动查询离线包更新。对于实时性要求比较高的页面，可装备在发动时更新离线包。
3）长衔接推送实时更新。更新实时性要求极高的场景运用。
4.2 架构改善
之前货拉拉webview容器（后续简称WebVC）选用的是两层结构，每个事务方从基础WebVC派生出自己的事务WebVC容器。两层结构在接入离线包时遇到如下问题：
| 离线包接入计划 | 长处 | 缺陷 |
|---|---|---|
| 集成到事务WebVC容器 | 不影响基础WebVC功用，影响规模小 | 通用性差，每个事务WebVC都需求修正，接入本钱高。 |
| 集成到基础WebVC容器 | 事务方接入简单，晋级基础WebVC即可 | 基础WebVC会变得臃肿，添加了离线包，调试工具，埋点功用，后续保护本钱高。 |
为了既不形成基础容器臃肿，保护本钱高，也要便利事务方快速接入，将webview改成了三层结构：
增强WebVC和基础WebVC 功用独立，已分成独立的仓库，由不同的开发保护，保护性大大提高。货拉拉基础WebVC容器代码暂未开源，开源代码中改成简化版完结，可自行定制和修正。
4.3 功用优化
1）查询并行化
现在已有多个H5页面选用离线包，为了提高查询效率，多个事务离线包查看的恳求采纳并行恳求的方法。因为HTTP2支撑多路复用，所以查询时共用一个NSURLSession目标，多次查询操作主动复用一个TCP衔接，减少树立衔接次数。考虑到后端改造本钱问题，现在不支撑聚合查询，计划在后续版别中完善。
2）下载任务去重
下载进程也是并行进行，可一起下载多个离线包。因为查询操作有多个触发机遇，存在重复下载的状况。为了节省流量，选用下载URL作为key，不重复下载正在下载或已下载的文件。
3）发动预下载
大部分离线包查询和下载的机遇为翻开H5页面时，因为离线包查询、下载、解压整体耗时超过1秒，导致初次翻开无法射中离线包。所以货拉拉离线包支撑装备部分离线包在发动时查看和下载离线包，提高初次翻开H5页面离线包射中率。装备json格局为：
{
"predownloadlist": //选填。需求发动就下载的离线包列表清单
["test-offline"]
}
4）断点续传
移动端网络安稳性不如固定网络，会出现因为无网络而导致下载中止的状况。货拉拉离线包接入了自研的下载SDK，支撑断点续传功用，节省了用户下载流量和时长。因为下载SDK代码暂时未开源，离线包对外开源代码中选用简化版别替代，没有完结断点续传功用。
5）解压异步化和串行化
解压进程是CPU和IO密集型操作，放在子线程中处理，有多个文件需求解压时，选用串行行列的方法，一次只解压一个文件，避免一起解压多个文件影响客户端功用。
4.4 可靠性规划
1）解压操作可靠性规划
文件解压耗时较长（大约30ms），假如程序异常退出可能会出现解压操作完结一半的状况，影响后续离线包功用。所以文件解压操作采纳先解压，然后重命名，保证最后得到的文件完整性。一起当离线包正在运用时，一般状况下采纳先解压，下次收效的战略，极点状况下马上收效，但会导致页面强刷，影响用户体会，运用较少。离线包存放时运用tmp、new、cur三个文件夹，不选用版别号命名，简化离线包缓存管理逻辑。解压细节如下：
2）三重降级战略
客户端主动降级。本地没有离线包时，客户端会主动将启用离线包的H5页面降级为线上H5页面。
长途装备降级。能够设置部分降级，即临时将某个运用离线包的H5页面降级为线上，也可设置全局降级，封闭所有页面的离线包功用。装备json为：
{
"switch": 1, //总开关，1敞开，0封闭
"disablelist": //选填，装备禁用某个离线包
["act-test"],
}
服务端接口降级。 服务端提供的离线包查询接口可设置将某个页面降级为线上H5，亦可装备客户端更新离线包后强制刷新。
降级战略流程图如下：
3）功用监控
货拉拉对webview的加载成功率，错误码、耗时进行了计算上报，经过监控面板查看。
此外离线包SDK还有离线包下载，恳求，解压的耗时、结果数据上报。监控和上报采纳的接口扩展方法，接入方根据事务特色选用具体的数据上报SDK。
4.5 效能优化
1）开发者工具
为了便利调试和查看，离线包中包含了开发者工具，仅在Debug形式下才干运用，可查看离线包版别和铲除离线包缓存。
2）离线包和URL映射装备化
客户端webview经过URL是否有offweb参数判别该页面走线上恳求仍是加载本地离线包。URL来历广泛，有客户端硬编码、运营系统下发、JS action调用多种来历，手动修正URL效率太低，因此经过长途装备，主动给指定URL添加离线包参数并射中对应的H5离线包。
装备json格局如下：首要经过host，path装备匹配规则。
{
"rules" :[
{
"host" :[
"test1.zzz.cn" ,
"test2.zzz.cn"
],
"path" :[
"/testapp"
],
"offweb" : "test-offline1"
},
{
"host" :[
"test3.xxx.cn" ,
"test4.xxx.cn"
],
"path" :[
"test/offweb" ,
"test/abc"
],
"offweb" : "test-offline2"
}
]
}
5. 收益分析
H5离线包经过多个事务上线验证，功用安稳，收益明显。
5.1 加载速度提高
改造完结的H5页面，平均加载速度从2s提高至1s。部分页面具体数据如下：
5.2 加载成功率提高
页面主结构（不考虑动态数据）加载成功率从96%提高到100%。
6.后期作业与展望
1）扩大开源规模。断点续传下载SDK，日志SDK后续会考虑开源。
2）单元测验用例完善。添加更多单元测验，保证安稳性。
7.参考资料
货拉拉离线包开源地址github.com/HuolalaTech…
携程增量更新zhuanlan.zhihu.com/p/34125968
Service worker zhuanlan.zhihu.com/p/148931732
github.com/yangfangkuo…
WKWebView完美网络恳求阻拦 www.jianshu.com/p/7b28cbd8f…
腾讯vassonic blog.csdn.net/oqzuser1587…
