With the application of 5G, big data and artificial intelligence technologies, various traditional industries are vigorously promoting digital transformation and upgrading.

Affected by the epidemic, the education industry is also greatly accelerating the online transformation process, and all kinds of online education applications are also expanding their mobile terminal market with the help of various forces.

“He Xiaoyu”, as an online learning application for subject enlightenment, is also thinking about how to get the top spot in the standing competition and gain the favor of more users.

There are many solutions to this problem, but the first step is to improve user experience and application performance.

“Lotus fish” urgent problem to be solved

Some pages in the original App are displayed by opening H5 through WebView, so the following problems may occur when opening some heavy pages:

1. A network fault causes a blank screen.

2. Browser compatibility problems;

3. The offline delivery function is unavailable.

4. Resources cannot be updated in a timely manner.

As an application for enlightenment education, the App page of “He Xiaoyu” needs to embed not only the basic framework code and page logic code, but also multiple font libraries and multiple audio and video files.

A large number of resources make the page vulnerable to network impacts. When the network is unstable, files are easily lost, the blank screen takes a long time to load resources, and network threads are blocked.

At the same time, it also makes it difficult for App to update resources: the latest resources cannot be updated in real time, and the cache is invalid. It caused a lot of obstacles for the technical team to update the version and fix bugs.

“H5 Container + Dynamic Publishing”

After multiple investigations, “He Xiaoyu” finally chose mPaaS “H5 container + Dynamic publishing Service” as the technical selection to solve the problems that App needs to solve at the present stage.

First of all, the UC kernel browser in THE mPaaS H5 container can fundamentally solve the browser compatibility problem.

In addition, the mPaaS H5 container supports offline package access.

An offline package packs static resources including HTML, JavaScript, and CSS into a compressed package. Download the offline package to the local PC, open the client, and load the offline package from the local PC. In this way, the H5 page is not affected by the network environment to the maximum extent.

The static resources in the page are embedded in the application and released in the way of offline package. When users start the application for the first time, they do not need to rely on the network environment to download the resources, but immediately start to use the application.

Finally, in conjunction with dynamic publishing capabilities, developers can put modified resources into an offline package during a new release or emergency release, and update the configuration for the app to download updates automatically. As a result, developers can let users receive updates early without having to go through the app store. Dynamically update page resources,

Application development, debugging and release deployment

Thanks to Lei Wenwei, front-end engineer from “He Xiaoyu”, he demonstrated how to access mPaaS and how to complete application release through practical demonstration.

www.bilibili.com/video/BV12Z…

The weak network environment is not affected, and version upgrade is not detected

User experience is a life-and-death issue that every application needs to face. Especially in the mushrooming online education app market, application performance is particularly important for user retention.

Mobile application developers from the beginning of the conversation, to the development, performance monitoring and network performance optimization solution, in the whole closed-loop process, through using mPaaS have development testing, log analysis, caton analysis, problem ability to repair mode, hot fix, can obtain the weak network environment without influence, version upgrades, perception of the user experience.

E.N.D.

Click on the bottom of this article to read the full replay of CodeHub#4.