Mobile Platform as a Service:Quick Start

Prerequisites

• If you use the native AAR integration method, you must first complete the steps in Add mPaaS to your project.

• If you use the component-based integration method, you must first complete the Component-based integration flow.

Add the SDK

Native AAR

To install the H5 Container component in your project, use AAR Component Management. For more information, see AAR component management.

Component-based

Install the H5 Container component in the Portal and Bundle projects using Component Management. For more information, see Manage component dependencies.

Initialize mPaaS

If you use the native AAR integration method, initialize mPaaS by adding the following code to your Application class:

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

For more information, see Initialize mPaaS.

Configure the miniapp package request interval

You can configure the request interval for miniapp packages globally or for individual packages.

• Global configuration: In your Android project, create a custom_config.json file in the assets/config path. Add the following content to the file:

  {
  "value": "{\"config\":{\"al\":\"3\",\"pr\":{\"4\":\"86400\",\"common\":\"864000\"},\"ur\":\"1800\",\"fpr\":{\"common\":\"3888000\"}},\"switch\":\"yes\"}",
  "key": "h5_nbmngconfig"\
  }

  The \"ur\":\"1800\" parameter sets the global update interval in seconds. The default value is 1800. The valid range is 0 to 86400 (24 hours). A value of 0 means no limit on the request interval.

  Important

  Do not change the other parameters.

• Individual configuration: To set the interval for a specific miniapp package, in the console, navigate to Add Offline Package > Extension Info and enter {"asyncReqRate":"1800"}. For more information, see the Extension Info section in Create an H5 offline package.

To verify that the configuration has taken effect, open a project with an integrated H5 offline package and filter the logcat logs by the H5BaseAppProvider keyword. The configuration is successful if you see the following log entry.

lastUpdateTime: xxx updateRate: xxx

Use the SDK

The mPaaS Nebula H5 container provides the MPNebula interface class for managing H5 container and offline package operations.

1. Start an H5 offline package.

   • Start an offline package:

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

   • Start an offline package with startup parameters:

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

2. Start an online page.

   • Start an online page:

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

   • Start an online page with startup parameters:

     /**
     * Starts an online URL.
     *
     * @param url   The online URL.
     * @param param The startup parameters.
     */
     public static void startUrl(String url, Bundle param);

3. Set a custom UserAgent.

   1. First, implement a provider for the User Agent (UA):

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

   2. Then call the API to set the UA:

      /**
      * Sets the UA.
      *
      * @param uaProvider The UA provider. The developer must implement the getUa method.
      */
      public static void setUa(H5UaProvider uaProvider)

   3. Configure the following:

      MPNebula.setUa(new H5UaProviderImpl());

4. Set a custom container view.

   The container provides methods to set a custom title bar, navigation menu, pull-to-refresh header, and WebView host layout. For an implementation example, see the code sample for H5 containers and offline packages with the AAR integration method in Get code samples.

   1. First, implement a view provider:

      public class H5ViewProviderImpl implements H5ViewProvider {
      @Override
      public H5WebContentView createWebContentView(Context context) {
       // Return a custom WebView host layout here. If null is returned, the default view is used.
       return null;
      }
      
      @Override
      public H5TitleView createTitleView(Context context) {
       // Return a custom title bar here. If null is returned, the default view is used.
       return null;
      }
      
      @Override
      public H5PullHeaderView createPullHeaderView(Context context, ViewGroup viewGroup) {
       // Return a custom pull-to-refresh header here. If null is returned, the default view is used.
       return null;
      }
      
      @Override
      public H5NavMenuView createNavMenu() {
       // Return a custom navigation menu here. If null is returned, the default view is used.
       return null;
      }
      }

   2. Then, call the interface to set the view:

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

   3. Execute the setting procedure:

      MPNebula.setCustomViewProvider(new H5ViewProviderImpl());

      Note

      To set a custom title bar, you must first set the bundle name. Otherwise, the required resources may not be found.

      // You must set the bundle name where the title bar resources are located. If you do not set it, the resources cannot be loaded and the title bar will not take effect.
      H5Utils.setProvider(H5ReplaceResourceProvider.class.getName(), new H5ReplaceResourceProvider() {
      @Override
      public String getReplaceResourcesBundleName() {
       return BuildConfig.BUNDLE_NAME;
      }
      });
      MPNebula.setCustomViewProvider(new H5ViewProviderImpl());

5. Embed a single container's view into a page.

   You can embed an H5 page as a view within a container using either the synchronous or asynchronous method.

   • Synchronous method

     /**
     * Gets the view of the H5 container.
     *
     * @param activity The page context.
     * @param param    The startup parameters, which can include an appid or a URL.
     * @return The view of the H5 container.
     */
     public static View getH5View(Activity activity, Bundle param);

   • Asynchronous method

     /**
     * Asynchronously gets the view of the H5 container.
     *
     * @param activity            The page context.
     * @param param               The startup parameters, which can include an appid or a URL.
     * @param h5PageReadyListener The asynchronous callback.
     */
     public static void getH5ViewAsync(Activity activity, Bundle param, H5PageReadyListener h5PageReadyListener);

     Note

     • Before you embed a container using either method, obtain the information of the corresponding offline package.

     • The asynchronous method does not occupy the main thread or affect performance.