Quick Start - Mobile Platform as a Service - Alibaba Cloud Documentation Center

The HTML5 container and offline packages are supported in the native AAR mode and the component mode. The HTML5 container allows you to open an online web page in an app, call a native API operation on the frontend, call a custom JSAPI on the frontend, customize the title bar of an HTML5 page, and use the UC kernel. The HTML5 offline package service allows you to publish, preset, start, and update offline packages.

Before you begin

If you connect to mPaaS based on native AAR, perform the prerequisite steps and subsequent steps. For more information, see Add mPaaS to your project.
If you connect to mPaaS based on components, complete the access procedure first. For more information, see Access procedure under Connect to mPaaS mPaaS based on components.

Add the UC SDK

Native AAR mode

In your project, install the HTML5 container component on the Component Management (AAR) page. For more information, see Manage component dependencies in the native AAR mode.

Component mode

In your Portal and Bundle projects, install the HTML5 container component on the Component Management page.

For more information, see Manage component dependencies in Access procedure.

Initialize the mPaaS

In the native AAR mode, you must initialize the mPaaS.

Add the following code to the Application node:

public class MyApplication extends Application {
    
    @Override
    public void onCreate() {
        super.onCreate();
        // mPaaS initialization
        MP.init(this);    
    }
}

For more details, see Initialize mPaaS.

Configure the interval between requests for a Mini Program package

The mPaaS allows you to globally or individually configure the interval between requests for a Mini Program package.

Global configuration: In the Android project, create a file named custom_config.json in assets/config and enter the following content in the file:
```
{
"value": "{\"config\":{\"al\":\"3\",\"pr\":{\"4\":\"86400\",\"common\":\"864000\"},\"ur\":\"1800\",\"fpr\":{\"common\":\"3888000\"}},\"switch\":\"yes\"}",
"key": "h5_nbmngconfig"\
}
```
\"ur\":\"1800\" specifies the interval of global updates. The value 1800 is the default value and is measured in seconds. You can modify the value to set the interval between requests for a global offline package. The value ranges from 0 to 86400 seconds, that is, 0 to 24 hours. The value 0 indicates that no intervals are specified.
Important: Do not modify other parameters unless required.
Individual configuration: The configuration takes effect only for the current Mini Program package. In the console, click Add to add an offline package. In the Extension Information field, enter {"asyncReqRate":"1800"} to set the request interval. For more information, see the description of Extension Information in Create an HTML5 offline package.

Check whether the configured request interval takes effect. You can open a project connected to the HTML5 offline package service. Open the log in Logcat, and select the keyword H5BaseAppProvider. If the log contains the following information, the configuration has taken effect.

lastUpdateTime: xxx updateRate: xxx

Use the SDK

The mPaaS Nebula HTML5 container provides a unified API class named MPNebula to implement operations of the HTML5 container and offline packages.

The call process is as follows:

Start an HTML5 offline package.

Start an offline package:

/**
* Start an offline package.
*
* @param appId: offline package ID
*/
public static void startApp(String appId);

Start an offline package with startup parameters:

/**
* Start an offline package.
*
* @param appId: offline package ID
* @param params: startup parameters
*/
public static void startApp(String appId, Bundle params);

Start an online page.

Start an online page:

/**
* Start an online URL.
*
* @param url: online URL
*/
public static void startUrl(String url)

Start an online page with startup parameters:

/**
* Start an online URL.
*
* @param url: online URL
* @param param: sartup parameters
*/
public static void startUrl(String url, Bundle param);

Set a custom UserAgent.

Implement a UA setter.

public class H5UaProviderImpl implements H5UaProvider {
@Override
public String getUa(String defaultUaStr) {
  // Do not modify the defaultUaStr parameter or return a result that does not contain the defaultUaStr parameter.
  return defaultUaStr + " AlipayClient/mPaaS"; 
}
}

Call the UA setup API:

/**
*Set UA.
*
* @param uaProvider: UA setter. The getUa method needs to be implemented.
*/
public static void setUa(H5UaProvider uaProvider)

Perform setting as follows:
```
MPNebula.setUa(new H5UaProviderImpl());
```

Set a custom container view.

The container provides methods for setting a custom title bar, navigation menu, the header of pull-to-refresh, and the WebView layout. For more information, see Sample code.

Implement a view setter.

public class H5ViewProviderImpl implements H5ViewProvider {
@Override
public H5WebContentView createWebContentView(Context context) {
  // The custom layout of WebView is returned here. If null is returned, the default view takes effect.
  return null;
}

@Override
public H5TitleView createTitleView(Context context) {
  // The custom title bar is returned here. If null is returned, the default view takes effect.
  return null;
}

@Override
public H5PullHeaderView createPullHeaderView(Context context, ViewGroup viewGroup) {
  // The pull-to-refresh head is returned here. If null is returned, the default view takes effect.
  return null;
}

@Override
public H5NavMenuView createNavMenu() {
  // The custom navigation menu is returned here. If null is returned, the default view takes effect.
  return null;
}
}

Call the view setup API:

/**
*Set container related custom views, such as the title bar, menu bar, web layout, and slide-the pull-down refresh head view.
* @param viewProvider: custom view provider
*/
public static void setCustomViewProvider(H5ViewProvider viewProvider);

Set the custom views.

MPNebula.setCustomViewProvider(new H5ViewProviderImpl());

Note: To set a custom title bar, set the bundle name first. Otherwise, the resource cannot be found.

// Set the name of the bundle where the title bar resource resides. If it is not set, the resource cannot be loaded and the title bar cannot take effect.
H5Utils.setProvider(H5ReplaceResourceProvider.class.getName(), new H5ReplaceResourceProvider() {
@Override
public String getReplaceResourcesBundleName() {
  return BuildConfig.BUNDLE_NAME;
}
});
MPNebula.setCustomViewProvider(new H5ViewProviderImpl());

Embed the view of a single container into the page.

Select one or more of the following methods as required to embed the HTML5 page into the view of a single container. The API provides synchronous and asynchronous methods.

Synchronous method

/**
*Obtain the view of the HTML5 container.
*
* @param activity: page context
* @param param: startup parameters, where the app ID or URL may be included
* @return: view of the HTML5 container
*/
public static View getH5View(Activity activity, Bundle param);

Asynchronous method

/**
*Obtain the view of the HTML5 container asynchronously.
*
* @param activity: page context
* @param param: startup parameters, where the app ID or URL may be included
* @param h5PageReadyListener: asynchronous callback
*/
public static void getH5ViewAsync(Activity activity, Bundle param, H5PageReadyListener h5PageReadyListener);

Note: