Use HTML5 offline package - Mobile Platform as a Service

The usage of an HTML5 offline package involves four steps:

Release an offline package
Preset an offline package
Start an offline package
Update an offline package

To demonstrate the features of HTML5 offline packages, this topic describes all of the four steps. However, not every step is necessary for using an HTML5 offline package. In actual production, you can perform specific steps based on your needs.

Release an offline package

This section describes how to release an offline package.

Prerequisites

You need to prepare a ZIP package of your front-end app. Otherwise, you can download the sample offline package.

Procedure

Log on to the mPaaS console and configure the information about the offline package of your app. For more information, see Configure an offline package.
Generate the offline package of your front-end app. You can also use the sample offline package. For more information, see Generate an offline package.
In the mPaaS console, create an HTML5 Application and upload your offline package. For more information, see Create an offline package.
Release the configured offline package to your app on the client. For more information, see Release an offline package.

Preset an offline package

This section describes how to preset an offline package.

Prerequisites

Your offline package is released in the mPaaS console.

Procedure

In the mPaaS console, download the AMR file and the configuration file of the offline package to your local system.
Put the downloaded AMR file and the configuration file in the assets directory of your project.

Preset the offline package into your app. We recommend that you register the offline package during the startup of the app. In this tutorial, the offline package is registered in the MyApplication class. Now, you have preset the offline package.

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 method is a blocking call. Please do not call the built-in offline package method on the main thread. If multiple amr packages are built in, make sure the file exists. If it does not exist, other built-in offline packages will fail.
            // This method can only be called once. Only the first call is valid if multiple calls are made.
            MPNebula.loadOfflineNebula("h5_json.json", new MPNebulaOfflineInfo("80000000_1.0.0.0.amr", "80000000", "1.0.0.0"));
            }
        }).start();
    }
}

Start an offline package

This section describes how to start an offline package.

Prerequisite

Your offline package is preset on the client.

Procedure

In the activity_main.xml file, create a button and set the button 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, specify the system behavior upon a tap on the start_app_btn button: start the offline package. In the following sample code, 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");
 }
});
```
After compiling the project, install and open the application on the phone.
Tap the Start Offline Package button. The web page that is preset in the offline package appears. Now, you have started the offline package.

Update an offline package

This section describes how to start an offline package.

Prerequisites

Your offline package is preset in the app on your client. A new HTML5 Application is created in the mPaaS console and a new offline package is uploaded.

Procedure

In the activity_main.xml file, create a button and set the button 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, specify the system behavior upon a tap on the update_app_btn button: update the offline package. In the following sample code, the parameter “80000000” is the app ID of 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 it is successful
             runOnUiThread(new Runnable() {
                 @Override
                 public void run() {
                     Toast.makeText(MainActivity.this, success ? "Offline package updated successfully" : "Offline package update failed", Toast.LENGTH_SHORT).show();
                 }
             });
         }
     });
 }
});

After compiling the project, install and open the application on the phone.
Tap the Update Offline Package button to open and update the offline package. After a prompt appears and indicates that the update is successful, tap the Start Offline Package button. The web page that is preset in the updated offline package appears. Now, you have updated the offline package.

Sample code

Click here to download the sample code in this topic.