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

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

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

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

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

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

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

1. 网络问题导致白屏；

2. 浏览器兼容性问题；

3. 无离线下发功能；

4. 无法及时更新资源。

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

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

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

“H5 容器+动态发布”

经过了多方调研，「荷小鱼」最终选择使用 mPaaS“H5 容器 + 动态发布服务”作为技术选型，用来解决 App 现阶段需要解决的难题。

首先，通过 mPaaS H5 容器中自带的 UC 内核浏览器，可以从根本上解决浏览器兼容性问题。

此外，mPaaS H5 容器支持离线包访问。离线包是将包括 HTML、JavaScript、CSS 等页面内静态资源打包到一个压缩包内。预先下载该离线包到本地，然后通过客户端打开，直接从本地加载离线包，从而最大程度地摆脱网络环境对 H5 页面的影响。

通过离线包的方式把页面内静态资源嵌入到应用中并发布，当用户第一次开启应用的时候，就无需依赖网络环境下载该资源，而是马上开始使用该应用。

最后，配合动态发布服务能力，在推出新版本或是紧急发布的时候，开发者可以把修改的资源放入离线包，通过更新配置让应用自动下载更新。因此，开发者无需通过应用商店审核，就能让用户及早接收更新。对页面资源进行动态更新，

应用的开发调试和发布部署

感谢来自「荷小鱼」的前端工程师雷文伟，通过实操演示，展示如何接入 mPaaS 以及如何完成应用发布。

视频地址：https://www.bilibili.com/video/BV12Z4y1F7cD/

弱网环境无影响、版本升级无感知

用户体验，是每一个应用都需要面临的生死题。尤其是在雨后春笋般的在线教育应用市场中，应用的性能对用户的留存效果显得更是尤为重要。

移动应用开发者从 DevOps 开始，到开发、性能监控、性能网络优化解决，在这一整套闭环流程中，通过借助 mPaaS 具备的开发测试、日志分析、卡顿分析、问题修复模式、热修复等各项能力，即可获取弱网环境无影响、版本升级无感知的用户体验。

E · N · D

点击文末阅读原文，观看CodeHub#4全程回放。