荷小鱼 x mPaaS | 借助 H5 容器改善 App 白屏、浏览器兼容等问题

随着5G、大数据、人工智能技术的应用，各类传统行业纷纷大力推进数字化转型升级。

而受疫情的影响，教育行业也在大幅加速线上化转型进程，各类在线教育应用也在借助各种力量拓张自己的移动端市场领域。

作为一款学科启蒙在线学习应用，同样也在这条赛道上，思考如何才能在林立的竞对竞争中拔得头筹，获得更多用户的青睐？

这个问题的解法有很多，但第一步肯定是提升用户体验、优化应用性能。

「荷小鱼」亟待解决的问题

原 App 内的部分页面，是通过 WebView 打开 H5 的方式来进行展示的，所以在打开一些重型页面时会出现以下的一些问题：

1. 网络问题导致白屏；

2. 浏览器兼容性问题；

3. 无离线下发功能；

4. 无法及时更新资源。

作为启蒙教育应用，「荷小鱼」的 App 页面除了需要嵌入基础框架代码和页面逻辑代码外，还需要嵌入多个字体库和多个音视频文件。

资源的多而大，导致页面非常容易收到网络的影响：网络不稳定时容易文件丢失、白屏加载资源时间长、造成网络线程阻塞等。

同时，也让 App 更新资源变得困难了很多：无法实时更新下发最新资源、缓存失效等。为技术团队在更新版本和调修 Bug 上造成了很大的阻碍。

“H5 容器+动态发布”

经过了多方调研，「荷小鱼