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

本文涉及的产品
容器镜像服务 ACR,镜像仓库100个 不限时长
简介: 弱网环境无影响、版本升级无感知

封面0401.png

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


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


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


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


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

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

1. 网络问题导致白屏;

2. 浏览器兼容性问题;

3. 无离线下发功能;

4. 无法及时更新资源。


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


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


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


“H5 容器+动态发布”

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

ed84fe8a40cd17c4acd3d5401d5f39c9 (3).png

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


此外,mPaaS H5 容器支持离线包访问。


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


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


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


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

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

点击阅读原文,观看完整视频。


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

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


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



E · N · D

动态-logo.gif

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

相关文章
|
Web App开发 移动开发 小程序
"项目中mpaas升级到10.2.3 适配Android 14之后 app中的H5以及小程序都访问不了,
"项目中mpaas升级到10.2.3 适配Android 14之后 app中的H5以及小程序都访问不了,显示“网络不给力,请稍后再试”,预发内网版本不能使用,线上版本可以正常使用,这个是什么原因啊,是某些参数没有配置吗,还是说是一些参数改错了?
247 2
|
4月前
|
域名解析 网络协议 API
【Azure Container App】配置容器应用的缩放规则 Managed Identity 连接中国区 Azure Service Bus 问题
本文介绍了在 Azure Container Apps 中配置基于自定义 Azure Service Bus 的自动缩放规则时,因未指定云环境导致的域名解析错误问题。解决方案是在扩展规则中添加 `cloud=AzureChinaCloud` 参数,以适配中国区 Azure 环境。内容涵盖问题描述、原因分析、解决方法及配置示例,适用于使用 KEDA 实现事件驱动自动缩放的场景。
136 1
|
存储 大数据 索引
【Azure Contianer Apps】在云上使用容器应用时收集日志遇见延迟问题
【Azure Contianer Apps】在云上使用容器应用时收集日志遇见延迟问题
127 0
|
移动开发 安全 小程序
mpaas常见问题之小程序容器,跑起来后一直提示 "网络不给力, 请稍后再试"如何解决
mPaaS(移动平台即服务,Mobile Platform as a Service)是阿里巴巴集团提供的一套移动开发解决方案,它包含了一系列移动开发、测试、监控和运营的工具和服务。以下是mPaaS常见问题的汇总,旨在帮助开发者和企业用户解决在使用mPaaS产品过程中遇到的各种挑战
307 0
|
运维 物联网 开发者
蚂蚁集团mPaaS平台与华为达成合作 加速上千家App“鸿蒙化”进程
11月23日,蚂蚁集团数字科技事业群旗下mPaaS与华为举行鸿蒙合作签约仪式,双方宣布将在鸿蒙产业创新、技术应用、商业发展等方面展开深入合作。随着mPaaS完成鸿蒙系统适配,将进一步丰富政务民生应用的国产系统兼容性,使更多伙伴、开发者和用户从中获益,并更好促进移动应用生态的繁荣及移动端体验的升级。
586 0
|
存储 Web App开发 数据安全/隐私保护
基于mPaaS搭建的app上线之前需要关注哪些方向
随着越来越多的金融行业基于mPaas搭建并上线新的App,App的上线质量也成为各个客户关注的重点。上线前检测哪些项目,如何检测,检测数据指标包括哪些成为我们思考的主要方向。借着上次去XX农信客户去做线上功能检测,加上之前多个mPaas历史项目的踩过的坑,将App上线前mPaas相关检测内容整理沉淀如下。
220 0
|
敏捷开发 自动驾驶 安全
蚂蚁数科mPaaS助力吉利打造超级APP,共建车企数智化标杆
车联网、智能座舱、无人驾驶等技术升级,可跨端交互的App成为用户服务最佳切口。近日,蚂蚁数科mPaaS首提面向车企行业解决方案,并已实现商业化输出,吉利极氪是首批重要伙伴之一。
346 0
|
运维 监控 Cloud Native
《云原生架构容器&微服务优秀案例集》——02 汽车/制造——极氪汽车 APP全面升级云原生技术架构,高效提升用户出行体验
《云原生架构容器&微服务优秀案例集》——02 汽车/制造——极氪汽车 APP全面升级云原生技术架构,高效提升用户出行体验
598 0
|
1月前
|
缓存 移动开发 JavaScript
如何优化UniApp开发的App的启动速度?
如何优化UniApp开发的App的启动速度?
393 139
|
1月前
|
移动开发 JavaScript weex
UniApp开发的App在启动速度方面有哪些优势和劣势?
UniApp开发的App在启动速度方面有哪些优势和劣势?
292 137