All Products
Search
Document Center

Use HTML5 offline package

Last Updated: Mar 24, 2021

The usage of an HTML5 offline package involves four steps: release, preset, start, and then update the 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 Application. Otherwise, you can download the sample offline package.

Procedure

  1. Log on to the mPaaS console and configure the information about the offline package of your Application. For more information, see Configure an offline package.
  2. Generate the offline package of your front-end Application. You can also use the sample offline package. For more information, see Generate an offline package.
  3. In the mPaaS console, create an HTML5 Application and upload your offline package. For more information, see Create an offline package.
  4. Release the configured offline package to your Application 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

  1. In the mPaaS console, download the AMR file and the configuration file of the offline package to your local system.Download the AMR file and the configuration file
  2. Put the downloaded AMR file and the configuration file in the assets directory of your project.assets
  3. Preset the offline package into your Application. We recommend that you register the offline package during the startup of the Application. In this tutorial, the offline package is registered in the MyApplication class. Now, you have preset the offline package.

       
    1. public class MyApplication extends Application {
    2. @Override
    3. protected void attachBaseContext(Context base) {
    4. super.attachBaseContext(base);
    5. // Suggestion: Check if this is the main process. Initialize only in the main process.
    6. QuinoxlessFramework.setup(this, new IInitCallback() {
    7. @Override
    8. public void onPostInit() {
    9. // Start to use the mPaaS functions here.
    10. registerCustomJsapi();
    11. // Call loadOfflineNebula() to load the offline package.
    12. loadOfflineNebula();
    13. }
    14. });
    15. }
    16. @Override
    17. public void onCreate() {
    18. super.onCreate();
    19. QuinoxlessFramework.init();
    20. }
    21. private void loadOfflineNebula() {
    22. new Thread(new Runnable() {
    23. @Override
    24. public void run() {
    25. // This method blocks calls of methods. Do not call the methods that are embedded in the offline package from the main thread. If multiple AMR packages are embedded, make sure that all the files exist. If one file does not exist, all the other embedded offline packages fail.
    26. // This method can be called only once. If it is called multiple times, only the first call is valid.
    27. MPNebula.loadOfflineNebula("h5_json.json", new MPNebulaOfflineInfo("80000000_1.0.0.0.amr", "80000000", "1.0.0.0"));
    28. }
    29. }).start();
    30. }
    31. }

Start an offline package

This section describes how to start an offline package.

Prerequisite

Your offline package is preset on the client.

Procedure

  1. In the activity_main.xml file, create a button and set the button id to start_app_btn.
       
    1. <Button
    2. android:id="@+id/start_app_btn"
    3. android:layout_width="match_parent"
    4. android:layout_height="wrap_content"
    5. android:layout_marginBottom="10dp"
    6. android:layout_marginLeft="10dp"
    7. android:layout_marginRight="10dp"
    8. android:layout_marginTop="20dp"
    9. android:background="#108EE9"
    10. android:gravity="center"
    11. android:text="Start Offline Package"
    12. android:textColor="#ffffff" />
  2. 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 Application ID of the offline package.
       
    1. findViewById(R.id.start_app_btn).setOnClickListener(new View.OnClickListener() {
    2. @Override
    3. public void onClick(View v) {
    4. MPNebula.startApp("80000000");
    5. }
    6. });
  3. After compiling the project, install the Application on a cell phone. After you start the Application, the following user interface appears.
    Start the offline package
  4. Tap the Start Offline Package button. The web page that is preset in the offline package appears. Now, you have started the offline package.
    Preview of the started offline package

Update an offline package

This section describes how to update an offline package.

Prerequisites

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

Procedure

  1. In the activity_main.xml file, create a button and set the button id to update_app_btn.
       
    1. <Button
    2. android:id="@+id/update_app_btn"
    3. android:layout_width="match_parent"
    4. android:layout_height="wrap_content"
    5. android:layout_marginBottom="10dp"
    6. android:layout_marginLeft="10dp"
    7. android:layout_marginRight="10dp"
    8. android:layout_marginTop="20dp"
    9. android:background="#108EE9"
    10. android:gravity="center"
    11. android:text="Update Offline Package"
    12. android:textColor="#ffffff" />
  2. In the MainActivity class, specify the system behavior upon a tap on the update_app_btn button: start the offline package. In the following sample code, the parameter “80000000” is the Application ID of the offline package.
       
    1. findViewById(R.id.update_app_btn).setOnClickListener(new View.OnClickListener() {
    2. @Override
    3. public void onClick(View v) {
    4. MPNebula.updateAllApp(new MpaasNebulaUpdateCallback() {
    5. @Override
    6. public void onResult(final boolean success, final boolean isLimit) {
    7. // The "success?" in the following code indicates whether the update is successful.
    8. runOnUiThread(new Runnable() {
    9. @Override
    10. public void run() {
    11. Toast.makeText(MainActivity.this, success ? "Offline package update succeeded": "Offline package update failed", Toast.LENGTH_SHORT).show();
    12. }
    13. });
    14. }
    15. });
    16. }
    17. });
  3. After compiling the project, install the Application on a cell phone. After you start the Application, the following user interface appears.
    Update an offline package
  4. 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.
    Preview of the updated offline package