how to publish, preset, start, and update H5 offline packages - Mobile Platform as a Service

This topic describes how to use H5 offline packages.

Using H5 offline packages involves four main steps:

Publish offline package
Preset offline package
Start offline package
Update offline package

This tutorial demonstrates the features of H5 offline packages by guiding you through the process of publishing, presetting, starting, and updating a package.

You are not required to follow this specific flow. In a production environment, you can use these features independently as needed.

Publish offline package

This section describes how to publish offline package.

Prerequisites

You must have a ZIP package of your frontend application. If you do not have one, you can download our sample offline package.

Procedure

Configure the offline package for your application in the console. For more information, see Configure offline package.
Generate offline package for your frontend application, or use our sample offline package. For more information, see Generate offline package.
Create and upload the offline package in the console. For more information, see Create offline package.
Publish the configured offline package to your client application. For more information, see Publish offline package.

Preset offline package

This section describes how to configure offline package.

Prerequisites

You must have published offline package in the mPaaS console.

Procedure

Download the offline package AMR file and the configuration file from the console.
Place the downloaded AMR file and configuration file in the assets folder of your project.

Preset the offline package in the application. We recommend registering the package when the application starts. In this tutorial, registration is performed in the MyApplication class.

public class MyApplication extends Application {
     
    @Override
    public void onCreate() {
        super.onCreate();
        
        MP.init(this,
            MPInitParam.obtain().setCallback(new MPInitParam.MPCallback() {
                @Override
                public void onInit() {
                    registerCustomJsapi();
                    loadOfflineNebula();
                }
            })
        );
    }
 
    private void loadOfflineNebula() {
        new Thread(new Runnable() {
            @Override
            public void run() {
            // This is a blocking call. Do not invoke the built-in offline package method on the main thread. If you have multiple built-in AMR packages, ensure the files exist. Otherwise, other built-in offline packages may fail to load.
            // This method can only be called once. Subsequent calls are ignored.
            MPNebula.loadOfflineNebula("h5_json.json", new MPNebulaOfflineInfo("80000000_1.0.0.0.amr", "80000000", "1.0.0.0"));
            }
        }).start();
    }
}

Start offline package

This section describes how to update offline packages.

Prerequisites

You must have preset offline package in the client.

Procedure

In the `activity_main.xml` file, add a button. Set the button's id to start_app_btn.

 <Button
     android:id="@+id/start_app_btn"
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     android:layout_marginTop="20dp"
     android:background="#108EE9"
     android:gravity="center"
     android:text="Start Offline Package"
     android:textColor="#ffffff"
     app:layout_constraintEnd_toEndOf="parent"
     app:layout_constraintHorizontal_bias="0.0"
     app:layout_constraintStart_toStartOf="parent"
     app:layout_constraintTop_toBottomOf="@+id/custom_title_btn_after" />

In the MainActivity class, define the click behavior for the start_app_btn button to start the offline package. The parameter "80000000" is the app ID of the offline package.
```
findViewById(R.id.start_app_btn).setOnClickListener(new View.OnClickListener() {
 @Override
 public void onClick(View v) {
     MPNebula.startApp("80000000");
 }
});
```
Compile the project and install the application on your phone. After you open the application, the following interface is displayed.
Click the Start Offline Package button to open the preset webpage in the offline package.

Update offline package

This section describes how to update offline package.

Prerequisites

You must have preset offline package in your client application. You must also have created and uploaded a new version of the offline package in the mPaaS console.

Procedure

In the `activity_main.xml` file, add a button. Set the button's id to update_app_btn.

 <Button
     android:id="@+id/update_app_btn"
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     android:layout_marginTop="20dp"
     android:background="#108EE9"
     android:gravity="center"
     android:text="Update Offline Package"
     android:textColor="#ffffff"
     app:layout_constraintEnd_toEndOf="parent"
     app:layout_constraintHorizontal_bias="1.0"
     app:layout_constraintStart_toStartOf="parent"
     app:layout_constraintTop_toBottomOf="@+id/start_app_btn" />

In the MainActivity class, define the click behavior for the update_app_btn button to update the offline package.

findViewById(R.id.update_app_btn).setOnClickListener(new View.OnClickListener() {
 @Override
 public void onClick(View v) {
     MPNebula.updateAllApp(new MpaasNebulaUpdateCallback() {
         @Override
         public void onResult(final boolean success, final boolean isLimit, String detailCode) {
             // success indicates whether the operation is successful
             runOnUiThread(new Runnable() {
                 @Override
                 public void run() {
                     Toast.makeText(MainActivity.this, success ? "Offline package updated successfully" : "Failed to update offline package", Toast.LENGTH_SHORT).show();
                 }
             });
         }
     });
 }
});

Compile the project and install the application on your phone. After you open the application, the following interface is displayed.
Click the Update Offline Package button to update the offline package. After the success message is displayed, click the Start Offline Package button to view the updated page.

Code sample

Click here to download the code sample for this tutorial.