随着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全程回放。

荷小鱼 x mPaaS | 借助 H5 容器改善 App 白屏、浏览器兼容等问题的更多相关文章

  1. 快成物流科技 x mPaaS | 小程序容器加持下的技术架构“提质增效”

      导言 从 2017 年开始,GMTC"移动技术大会"就更名为"大前端技术大会".发展至今,混合开发.原生开发.前端开发等概念正在深度融合,组成"大 ...

  2. iOS H5容器的一些探究(二):iOS 下的黑魔法 NSURLProtocol

    来源:景铭巴巴 链接:http://www.jianshu.com/p/03ddcfe5ebd7 iOS H5 容器的一些探究(一):UIWebView 和 WKWebView 的比较和选择 一.前言 ...

  3. iOS H5 容器的一些探究(一):UIWebView 和 WKWebView 的比较和选择

    来源:景铭巴巴 链接:http://www.jianshu.com/p/84a6b1ac974a 一.Native开发中为什么需要H5容器 Native开发原生应用是手机操作系统厂商(目前主要是苹果的 ...

  4. iOS H5容器的一些探究(一):UIWebView和WKWebView的比较和选择

    一.Native开发中为什么需要H5容器 Native开发原生应用是手机操作系统厂商(目前主要是苹果的iOS和google的Android)对外界提供的标准化的开发模式,他们对于native开发提供了 ...

  5. iOS - UIWebView和WKWebView的比较和选择-作为H5容器的一些探究

    一.Native开发中为什么需要H5容器 Native开发原生应用是手机操作系统厂商(目前主要是苹果的iOS和google的Android)对外界提供的标准化的开发模式,他们对于native开发提供了 ...

  6. 【网易云信】H5 容器技术方案

    Native 开发原生应用是手机操作系统厂商(目前主要是苹果的 iOS 和 Google 的 Android)对外界提供的标准化的开发模式,他们对于 Native 开发提供了一套标准化实现和优化方案. ...

  7. H5单页面手势滑屏切换原理

    H5单页面手势滑屏切换是采用HTML5 触摸事件(Touch) 和 CSS3动画(Transform,Transition)来实现的,效果图如下所示,本文简单说一下其实现原理和主要思路. 1.实现原理 ...

  8. 移动端H5页面高清多屏适配方案

    背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范 ...

  9. 解惑好文:移动端H5页面高清多屏适配方案 (转)

    转自:http://mobile.51cto.com/web-484304.htm https://github.com/amfe/lib-flexible/blob/master/src/makeg ...

随机推荐

  1. Github Pages+Gridea搭建个人博客

    1 概述 Github Pages可以用来托管个人网站,静态的,便于用来实现博客,可以在一个仓库的settings中开启: Gridea是一个静态博客写作客户端,所有文件都在本地,没有数据库,实现简单 ...

  2. 2021 DevOpsDays 东京站完美收官 | CODING 专家受邀分享最新技术资讯

    DevOpsDays 是一个全球知名的系列技术会议品牌,内容涵盖了软件开发.自动化.测试.安全.组织文化以及 IT 运营的社区会议等.DevOpsDays 由 DevOps 之父 Patrick De ...

  3. Day14_75_反射(reflect)

    反射 反射的基本概念 反射是由Smith在1982年首次提出,主要是指程序可以访问,检测,修改它本身状态或行为的一种能力.并且能够根据自身行为的状态或结果,调整和修改所描述行为的状态和相关语义. ja ...

  4. 总结:composer的install和require和update指令。到底什么时候用什么指令

    https://packagist.org  相当于是应用商店

  5. Windows核心编程 第十七章 -内存映射文件(上)

    第1 7章 内存映射文件 对文件进行操作几乎是所有应用程序都必须进行的,并且这常常是人们争论的一个问题.应用程序究竟是应该打开文件,读取文件并关闭文件,还是打开文件,然后使用一种缓冲算法,从文件的各个 ...

  6. 【python】Leetcode每日一题-丑数

    [python]Leetcode每日一题-丑数 [题目描述] 给你一个整数 n ,请你判断 n 是否为 丑数 .如果是,返回 true :否则,返回 false . 丑数 就是只包含质因数 2.3 和 ...

  7. 【c#】 使用Directory.GetFiles获取局域网中任意电脑指定文件夹下的文件

    本文为老魏原创,如需转载请留言 格式如下: // 获取IP地址为10.172.10.167下D盘下railway下的所有文件 string[] picArray = Directory.GetFile ...

  8. 【转】docker打包python应用

    转自https://www.cnblogs.com/shenh/p/9518343.html 一.前言 容器使用沙箱机制,互相隔离,优势在于让各个部署在容器的里的应用互不影响,独立运行,提供更高的安全 ...

  9. C#中的类、方法和属性

    这节讲C#中的类,方法,属性.这是编码中我们最直接打交道的三个结构.      类: 类(class)是面向对象中最基本的单元,它是一种抽象,对现实世界中事物的抽象,在C#中使用class关键字声明一 ...

  10. 折腾Linux内核编译

    计网提高实验.指导书给的是远古版本2.6.39.2,轻易在某hub上找到下载地址 查表 看起来Ubuntu 11.04离得最近,遂下一个镜像 懒得上google检索了,编译准备先follow这篇博客试 ...