How to determine if a page issue is related to the H5 container

Background

When developing an H5 application, you may encounter frontend issues, such as rendering problems, stuttering, or other abnormal behavior. Because H5 applications load in the mPaaS container, you must determine if these issues are related to the container.

Methods

iOS platform

On the mPaaS for iOS platform, the container is based on WKWebView. This applies to baseline 60 and later if WKWebView is enabled. Follow these steps to confirm if a frontend issue is related to the container:

1. Simplify the frontend code and logic. Try to reproduce the issue on a simple HTML page.

2. Load the page (offline or online) through the container to confirm if the issue is reproducible.

3. Create a native iOS application. Load the same page using a native WKWebView to check if the issue is reproducible:

   • If the issue is reproducible, there are three possible causes:

     • The frontend code has an issue.

     • WKWebView has an issue.

     • There is a compatibility issue between the frontend code and WKWebView.

   • If the issue is not reproducible, it may be related to the mPaaS container configuration. For technical support, search for and join the DingTalk group with the ID 145930007362. Provide the HTML file that you used to reproduce the issue.

Android platform

On the Android platform, you can use a container based on the UC Browser kernel or the native browser kernel. Follow these steps to confirm if a frontend issue is related to the container:

1. Simplify the frontend code and logic. Try to reproduce the issue on a simple HTML page.

2. Load the page (offline or online) through the UC kernel container to confirm if the issue is reproducible.

3. Load the page (offline or online) through the native browser kernel container to confirm if the issue is reproducible.

4. Create a native Android application. Load the same page using a native WebView to confirm if the issue is reproducible.

By combining these tests, you can determine if the issue originates from the UC kernel, the native kernel, the container, or the frontend code.

JsAPI-related issues

JsAPI is a feature of the mPaaS container. If an issue is related to a JsAPI, validation using a native WebView is not practical.

First, check the frontend. Remove the JsAPI-related content and see if the issue persists.

• If this occurs, treat it as a standard frontend issue.

• If the issue is tightly coupled with the JsAPI, simplify the JsAPI before you investigate further.

Handling offline package pages

To validate a page in an offline package, fetch its fallback url. Then, load the fallback page in a WebView to quickly validate the issue.

• The fallback base url is in the offline package configuration file H5_json.json.

• A page's fallback url is the fallback base url combined with the page's relative address. For example, load the page from the following address:https://mcube-prod.oss-cn-hangzhou.aliyuncs.com/7E3C5B0121415-beimo/20190003/1.xx.xx.2_all/nebula/fallback/www/index.html