Lotus x mpaas | improve app white screen and browser compatibility with H5 container

Time:2021-6-10

Introduction:Weak network environment has no impact, version upgrade has no perception

Lotus x mpaas | improve app white screen and browser compatibility with H5 container

With the application of 5g, big data and artificial intelligence technology, all kinds of traditional industries have vigorously promoted digital transformation and upgrading.

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

As a discipline enlightenment online learning application, “Lotus fish” is also on this track. How can it take the lead in the competition and win the favor of more users?

There are many solutions to this problem, but the first step must be to solve itImprove user experience and optimize application performance

Problems to be solved in “Lotus fish”

Some pages in the original app are displayed by opening H5 with WebView, so the following problems will appear when opening some heavy pages:

1. Network problems lead to white screen;

2. Browser compatibility;

3. No offline distribution function;

4. Unable to update resources in time.

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

Due to the large amount of resources, the page is easy to be affected by the network: when the network is unstable, it is easy to lose files, load resources on the white screen for a long time, and cause network thread blocking.

At the same time, it also makes it difficult for app to update resources: unable to update and distribute the latest resources in real time, cache failure, etc. It is a big obstacle for the technical team to update the version and debug bugs.

“H5 container + dynamic release”

After a lot of research, “he Xiaoyu” finally chose to use mpaas “H5 container + dynamic publishing service” as the technology selection to solve the problems of app at this stage.

Lotus x mpaas | improve app white screen and browser compatibility with H5 container.png”)

First of all, through the UC kernel browser in the mpaas H5 container, we can fundamentally solve the problem of browser compatibility.

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

Offline package is to package static resources including HTML, JavaScript, CSS and other pages into a compressed package. Download the offline package to the local in advance, and then open it through the client to load the offline package directly from the local, so as to get rid of the impact of the network environment on the H5 page to the greatest extent.

The static resources in the page are embedded into the application and published by offline package. When the user opens the application for the first time, he does not need to rely on the network environment to download the resources, but starts to use the application immediately.

Finally, with the ability of dynamic publishing service, developers can put the modified resources into the offline package when a new version or emergency release is launched, and let the application download the update automatically through the update configuration. Therefore, developers can let users receive updates as soon as possible without going through the app store audit. Dynamically update page resources,

Application development debugging and release deployment

Thanks to Lei Wenwei, the front-end engineer of “Lotus fish”, who demonstrated how to access mpaas and how to complete the application release through practical demonstration.

clickRead the original, watch the full video.

Weak network environment has no impact, version upgrade has no perception

User experience is a life and death problem for every application. Especially in the mushrooming online education application market, the application performance is particularly important for the retention effect of users.

Mobile application developers start from Devops to development, performance monitoring, performance network optimization and solution. In this whole closed-loop process, with the help of mpaas’s development and testing, log analysis, carton analysis, problem repair mode, hot repair and other capabilities, they can get a user experience with no impact on the weak network environment and no perception of version upgrade.

E · N · D

Lotus x mpaas | improve app white screen and browser compatibility with H5 container

Click at the end of the articleRead the original, watch the full playback of codehub # 4.

Copyright notice:The content of this article is spontaneously contributed by alicloud real name registered users, and the copyright belongs to the original author. The alicloud developer community does not own its copyright, nor does it bear the corresponding legal responsibility. For specific rules, please refer to the user service agreement of alicloud developer community and the guidelines for intellectual property protection of alicloud developer community. If you find any suspected plagiarism content in the community, fill in the infringement complaint form to report. Once verified, the community will immediately delete the suspected infringement content.