【bigo】前端静态资源离线化解决方案

[fanky-c]

方案背景和目的

在Hybrid App（混合模式移动应用），由于整体的加载流程都是串行的，资源的加载速度将直接影响到页面打开速度与白屏时间；前端静态资源离线方案，用于客户端 webview 缓存前端资源，能有效加快页面的访问速度、提升用户体验、提高留存率，方案特别适用于弱网环境和关键页面

方案简述

1. WebView加载流程： 这个过程过于依赖用户当前所处的网络环境，其中首次Webkit初始化、资源下载、页面数据请求占据了大部分时间
   

2. WebView预加载核心原理：通过web资源的离线包预下载，配合客户端URL拦截自加载，我们可以使用本地文件替换网络加载，缩短用户加载页面资源的时间，直接提升页面打开速度 并减少 白屏时间

3. WebViw预加载分类： 公共库预加载、 页面预加载

方案流程

A, 核心流程

1. 用户冷启动客户端
2. 客户端根据push平台（云控平台）推送的预加载开关配置信息； 请求协议地址（预加载配置后台对外服务），得到离线包cdn地址、版本号等信息
3. 得到cdn地址之后， 客户端根据之前离线包版本号、文件md5指等信息是否下载、更新离线资源包
4. 用户访问H5页面， 静态资源命中本地文件，加载本地资源， 反之则走网络

B，客户端流程

C，预加载配置后台流程

更新策略

A, 页面预加载

1. 客户端策略：冷启动时期获取配置开关与协议请求地址，对比文件名、文件夹MD5值更新本地资源
2. 前端策略： 后端接口需隔离多个版本， 其他无需关注（预加载配置服务每隔5分钟去爬H5页面资源，判断是否要更新页面预加载配置）

B, 公共库预加载

1. 客户端策略：冷启动时期获取配置开关与协议请求地址，对比公共库版本号更新本地的资源包
2. 前端策略：需隔离多个版本的公共库，客户端每次启动对齐服务器最新基础库版本

优化细节

1. 引入公共库预加载， 让没有接入页面预加载的h5页面也能享受到部分预加载的收益
2. app内存空间有限，为了最大节省磁盘空间， 生成页面预加载资源会剔除公共库预加载离线包已存在的资源， 避免资源重复，减少页面离线包体积大小
3. 主动+每隔5分钟定时生成页面预加载配置， 大大减少了开发者接入使用成本

方案收益

web页面的【使用时才下载】是一把双刃剑，既带来了应用实时更新的灵活性， 也造成了应用启动延迟的体验短板。

此方案目前已接入应用： bigolive、imo、likee； 首屏页面打开时间缩短到100ms以内（未使用时间为1s左右）, 大大提高了用户体验

后期规划

1. 更细维度：目前维度有业务线、系统、版本，后续考虑新增国家、地区、机型等等
2. 更合适的更新时机： 目前只有冷启动时机才更新预加载资源，后续考虑新增页面/公共库更新就主动推预加载资源给客户端