All Products
Search
Document Center

How to know the page issue is related to HTML5 container

Last Updated: May 19, 2021

Background

During the development of HTML5 apps, developers may encounter various front-end problems, such as rendering problems and lagging. Because HTML5 app is loaded in the mPaaS container, you need to define whether such problems are related to the container.

Resolution

iOS platform

The current container on the mPaaS iOS platform is implemented on WKWebView. WKWebView is configured and enabled after the 60 baseline. You can confirm whether the front-end problem is related to the container by the following method:

  1. Simplify the code and logic of the front-end problem, then try to reproduce the problem on a simpler HTML page.
  2. Load the offline or online page through the container to confirm whether the problem can be reproduced.
  3. Construct another native iOS application and load the same page through native WKWebView to see whether the problem can be reproduced:
    • If the problem can be reproduced, there are three possibilities:
      • There is a problem with the front-end code.
      • There is a problem with WKWebView.
      • The front-end code and WKWebView have compatibility issues.
    • If the problem cannot be reproduced, it may be related to the configuration of the mPaaS container. We recommend that you submit a ticket to contact technical support and provide HTML files for reproducing the problem.

Android platform

On the Android platform, developers can choose to use a container based on the UC browser kernel or the native browser kernel. The following method can be used to confirm whether the front-end problem is related to the container:

  1. Simplify the code and logic of the front-end problem, then try to reproduce the problem on a simpler HTML page.
  2. Load the offline or online page through the UC kernel container to confirm whether the problem can be reproduced.
  3. Load the offline or online page through the container of the native browser kernel to confirm whether the problem can be reproduced.
  4. Construct another native Android application and load the same page through the native WebView to confirm whether the problem can be reproduced.

Through a combination of the preceding tests, developers can confirm whether the problem comes from the UC kernel, native kernel, container, or the front end.

JSAPI is one of the features of mPaaS container. If the problem is related to JSAPI, it is inconvenient to verify through native WebView.

We recommend that you observe from the front end. Stripe the JSAPI related content and confirm whether the problem still exits.

  • If the problem exists, treat it as a normal front-end problem.
  • If the problem is highly coupled with JSAPI, we recommend that you simplify JSAPI before further investigation.

Handle with offline package pages

For the page in the offline package, if you need to verify whether there is a problem, you can extract the fallback url of the page. Then load the fallback page through WebView to verify the problem.

  • The fallback base url is located in the offline package configuration file H5_json.json .
  • The fallback base url + The relative page address is the fallback url of a page. See the following figure:
    fallback url
    Then load the page through the following address:
    https://mcube-prod.oss-cn-hangzhou.aliyuncs.com/7E3C5B0121415-beimo/20190003/1.0.0.2_all/nebula/fallback/www/index.html