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, you must initialize mPaaS. To do this, add 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

mPaaS lets you configure the request interval for miniapp packages. You can set this interval 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. You can change this value to configure the global offline package request interval. The valid range is from 0 to 86400 (equivalent to 24 hours). A value of 0 indicates that there is no limit on the request interval.

  Important

  Do not change the other parameters.

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

To verify that the request interval configuration has taken effect, open a project with an integrated H5 offline package. Filter the logcat logs using 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 unified MPNebula interface class to manage H5 container and offline package operations. The call procedure is as follows:

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) as shown below:

      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. You can 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 a specific implementation, 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 as shown below:

      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. Choose one of the following methods as needed. Both synchronous and asynchronous methods are available.

   • 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 the synchronous or asynchronous methods, obtain the information of the corresponding offline package.

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