乐趣区

关于移动应用开发:荷小鱼-x-mPaaS-借助-H5-容器改善-App-白屏浏览器兼容等问题

随着 5G、大数据、人工智能技术的利用,各类传统行业纷纷鼎力推动数字化转型降级。

而受疫情的影响,教育行业也在大幅减速线上化转型过程,各类在线教育利用也在借助各种力量拓张本人的挪动端市场畛域。

「荷小鱼」作为一款学科启蒙在线学习利用,同样也在这条赛道上,思考如何能力在林立的竞对竞争中拔得头筹,取得更多用户的青眼?

这个问题的解法有很多,但第一步必定是 晋升用户体验、优化利用性能

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

原 App 内的局部页面,是通过 WebView 关上 H5 的形式来进行展现的,所以在关上一些重型页面时会呈现以下的一些问题:

  1. 网络问题导致白屏;
  2. 浏览器兼容性问题;
  3. 无离线下发性能;
  4. 无奈及时更新资源。

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

资源的多而大,导致页面非常容易收到网络的影响:网络不稳固时容易文件失落、白屏加载资源工夫长、造成网络线程阻塞等。

同时,也让 App 更新资源变得艰难了很多:无奈实时更新下发最新资源、缓存生效等。为技术团队在更新版本和调修 Bug 上造成了很大的妨碍。

“H5 容器 + 动静公布”

通过了多方调研,「荷小鱼」最终抉择应用 mPaaS“H5 容器 + 动静公布服务”作为技术选型,用来解决 App 现阶段须要解决的难题。

.png”)

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

此外,mPaaS H5 容器反对离线包拜访。

离线包是将包含 HTML、JavaScript、CSS 等页面内动态资源打包到一个压缩包内。事后下载该离线包到本地,而后通过客户端关上,间接从本地加载离线包,从而最大水平地解脱网络环境对 H5 页面的影响。

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

最初,配合动静公布服务能力,在推出新版本或是紧急公布的时候,开发者能够把批改的资源放入离线包,通过更新配置让利用主动下载更新。因而,开发者无需通过利用商店审核,就能让用户及早接管更新。对页面资源进行动静更新,

利用的开发调试和公布部署

感激来自「荷小鱼」的前端工程师雷文伟,通过实操演示,展现如何接入 mPaaS 以及如何实现利用公布。

https://www.bilibili.com/vide…

点击 浏览原文,观看残缺视频。

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

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

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

E · N · D

点击文末 浏览原文,观看 CodeHub#4 全程回放。

退出移动版