共计 1212 个字符,预计需要花费 4 分钟才能阅读完成。
随着 5G、大数据、人工智能技术的利用,各类传统行业纷纷鼎力推动数字化转型降级。
而受疫情的影响,教育行业也在大幅减速线上化转型过程,各类在线教育利用也在借助各种力量拓张本人的挪动端市场畛域。
「荷小鱼」作为一款学科启蒙在线学习利用,同样也在这条赛道上,思考如何能力在林立的竞对竞争中拔得头筹,取得更多用户的青眼?
这个问题的解法有很多,但第一步必定是 晋升用户体验、优化利用性能。
「荷小鱼」亟待解决的问题
原 App 内的局部页面,是通过 WebView 关上 H5 的形式来进行展现的,所以在关上一些重型页面时会呈现以下的一些问题:
- 网络问题导致白屏;
- 浏览器兼容性问题;
- 无离线下发性能;
- 无奈及时更新资源。
作为启蒙教育利用,「荷小鱼」的 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 全程回放。