使用 H5 离线包

H5 离线包的使用可以分为以下四个部分：

1. 发布离线包

2. 预置离线包

3. 启动离线包

4. 更新离线包

在本教程中为了说明和演示 H5 离线包的功能，采取了从发布到预置，再到启动，最后完成更新的流程。

但是这一流程并非是使用 H5 离线包的必要条件。在实际生产中，您可以自由地根据需要进行使用。

发布离线包

本节介绍了发布离线包的操作流程。

前提条件

您需要准备一个前端 App 的 zip 包，如果您没有自己的前端离线包，您可以下载我们为您准备好的 示例离线包。

操作步骤

1. 先在控制台的应用中配置离线包信息，请参考 配置离线包。

2. 生成您自己的前端 App 的离线包（或者使用我们的示例离线包），请参考 生成离线包。

3. 在控制台上创建该离线包并上传，请参考 创建离线包。

4. 将配置好的离线包发布到您的客户端 App 中，请参考 发布离线包。

预置离线包

本节介绍了预置离线包的操作流程。

前提条件

您已经在 mPaaS 控制台发布了离线包。

操作步骤

1. 在控制台下载离线包 AMR 文件和离线包配置文件到本地。

2. 将下载到的离线包 AMR 文件和离线包配置文件放在工程中的 assets 目录下。

   

3. 将离线包预置到应用内。推荐在 APP 启动的时候注册，在本教程中在 MyApplication 类中进行注册。至此，您已经完成预置离线包。

   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() {
               // 此方法为阻塞调用，请不要在主线程上调用内置离线包方法。如果内置多个 amr 包，要确保文件已存在，如不存在，会造成其他内置离线包失败。
               // 此方法仅能调用一次，多次调用仅第一次调用有效。
               MPNebula.loadOfflineNebula("h5_json.json", new MPNebulaOfflineInfo("80000000_1.0.0.0.amr", "80000000", "1.0.0.0"));
               }
           }).start();
       }
   }

启动离线包

本节介绍了更新离线包的操作流程。

前提条件

您在客户端中已经预置了离线包。

操作步骤

1. 在 activity_main.xml 文件中，新增按钮，按钮的 id 为 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="启动一个离线包"
        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" />

2. 在 MainActivity 类定义单击按钮 start_app_btn 后的行为，启动离线包。其中传入的参数“80000000”为离线包的 APPID。

   findViewById(R.id.start_app_btn).setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        MPNebula.startApp("80000000");
    }
   });

3. 编译工程后，在手机上安装应用。打开应用后界面如下。

   

4. 单击按钮 启动一个离线包，即可打开离线包中预置的网页。至此，您已完成 启动离线包。

更新离线包

本节介绍了更新离线包的操作流程。

前提条件

您的客户端应用中已经预置了离线包，并且在 mPaaS 控制台上已经创建了新的离线包版本，也上传了新版本的离线包。

操作步骤

1. 在 activity_main.xml 文件中，新增按钮，按钮的 id 为 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="更新离线包"
        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" />

2. 在 MainActivity 类定义单击按钮 update_app_btn 后的行为，更新离线包。其中传入的参数“80000000”为离线包的 APPID。

   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) {
                // success 为是否成功
                runOnUiThread(new Runnable() {
                    @Override
                    public void run() {
                        Toast.makeText(MainActivity.this, success ? "离线包更新成功" : "离线包更新失败", Toast.LENGTH_SHORT).show();
                    }
                });
            }
        });
    }
   });

3. 编译工程后，在手机上安装应用。打开应用后界面如下。

   

4. 单击按钮 更新离线包，即可打开更新离线包。在提示更新成功后，在单击按钮 启动一个离线包，即可以看到更新后的页面。至此，您已完成 更新离线包。

   

代码示例

点此下载 此教程中使用的代码示例。