All Products
Search
Document Center

Use HTML5 offline package

Last Updated: Mar 24, 2021

Follow the instructions in Create a project in Xcode to create a project. This topic describes how to use an HTML5 offline package for the project.

Release an offline package

First, you need to prepare a zip package for the front-end app. If no offline package is available, you can download the demo offline package.

  1. Configure the offline package in the console. See Configure an offline package.
  2. Generate the offline package for the front-end app or use the downloaded demo offline package. See Generate an offline package.
  3. Create and upload the offline package in the console. See Create an offline package.
  4. Release the configured offline package to your app on the client. See Release an offline package.

Preset an offline package

  1. Download the offline package AMR file and configuration file to the local disk.
    Download the offline package and the configuration file.

  2. Create DemoCustomPresetApps.bundle under MyH5Application_offpack/Resources, clear all contents under the bundle, and then add the offline package AMR file and configuration file to the bundle.
    Create bundle

  3. Register the preset offline package to the container. Assign the path of the PLIST file that contains information of the preset offline package to presetApplistPath, assign the path of the offline package to appPackagePath, and then use initNebulaWithCustomPresetApplistPath to complete initialization. The offline package preset is complete.

    1. - (void)application:(UIApplication *)application beforeDidFinishLaunchingWithOptions:(NSDictionary *)launchOptions
    2. {
    3. NSString *presetApplistPath = [[NSBundle mainBundle] pathForResource:[NSString stringWithFormat:@"DemoCustomPresetApps.bundle/h5_json.json"] ofType:nil];
    4. NSString *appPackagePath = [[NSBundle mainBundle] pathForResource:[NSString stringWithFormat:@"DemoCustomPresetApps.bundle"] ofType:nil];
    5. [MPNebulaAdapterInterface initNebulaWithCustomPresetApplistPath:presetApplistPath customPresetAppPackagePath:appPackagePath customPluginsJsapisPath:@""];
    6. }

Start the offline package

  1. Add code in MyH5Application_offpack/Sources/DemoViewController.m. Add button4. Click this button to call an API to open the offline package page.

    1. UIButton *button4 = [UIButton buttonWithType:UIButtonTypeCustom];
    2. button4.frame = CGRectMake(30, 150, [UIScreen mainScreen].bounds.size.width-60, 44);
    3. button4.backgroundColor = [UIColor blueColor];
    4. [button4 setTitle:@"Open offline package page" forState:UIControlStateNormal];
    5. [button4 addTarget:self action:@selector(startOffPack) forControlEvents:UIControlEventTouchUpInside];
    6. [self.view addSubview:button4];
  2. In MyH5Application_offpack/Sources/DemoViewController.m, add code for button4 to implement the launch of the offline package. The passed parameter 80000000 is the app ID of the offline package. Refer to the following code.

    1. - (void)startOffPack
    2. {
    3. [[MPNebulaAdapterInterface shareInstance] startH5ViewControllerWithNebulaApp:@{@"appId":@"80000000"}];
    4. }
  3. After compiling the project, install the app on a cell phone. The following figure shows the interface after you open the application.

  4. Click the Open Offline Package Page button. The preset page of the offline package is displayed, as shown in the following figure. Now, you have started the offline package.

Update an offline package

  1. Add code in MyH5Application_offpack/Sources/DemoViewController.m.
    Add button5. Click this button to call an API to open the offline package page.

    1. UIButton *button5 = [UIButton buttonWithType:UIButtonTypeCustom];
    2. button5.frame = CGRectOffset(button4.frame, 0, 80);
    3. button5.backgroundColor = [UIColor blueColor];
    4. [button5 setTitle:@"Update offline package" forState:UIControlStateNormal];
    5. [button5 addTarget:self action:@selector(updateOffPack) forControlEvents:UIControlEventTouchUpInside];
    6. [self.view addSubview:button5];
  2. In MyH5Application_offpack/Sources/DemoViewController.m, add code for button5 to implement the update of the offline package.

    1. - (void)updateOffPack
    2. {
    3. [[MPNebulaAdapterInterface shareInstance] requestNebulaAppsWithParams:@{@"80000000":@"*"} finish:^(NSDictionary *data, NSError *error) {
    4. NSString *result = @"No new release in the background";
    5. if (! error && [data[@"data"] count] > 0) {
    6. result = [NSString stringWithFormat:@"%@", data[@"data"]];
    7. }
    8. dispatch_async(dispatch_get_main_queue(), ^{
    9. UIAlertView* alertView = [[UIAlertView alloc] initWithTitle:@"Offline package updated" message:result delegate:nil cancelButtonTitle:@"OK" otherButtonTitles:nil, nil];
    10. [alertView show];
    11. });
    12. }];
    13. }
  3. After compiling the project, install the app on a cell phone. The following figure shows the interface after you open the application.

  4. Click the Open Offline Package Page button. The following page is displayed.

  5. Click the Update Offline Package button. A toast message No new release in the background is displayed.

  6. Update the offline package file. Then upload and release the updated file in the console. In this example, the update changes the text displayed on the button to Update 20190826.
    Upload the updated offline package file

    Note: You need to specify the supported version range of clients when you upload the new release of offline package in the console in order to update offline packages on clients. The version range is determined by the minimum version and the maximum version. Only clients within the version range can receive new offline packages. You can get the client version information from the product version field in the info.plist file of a project on the client. Client range
  7. Click the Update Offline Package button in the application. A toast message Offline package updated is displayed, as shown in the following figure.

  8. Click the Open Offline Package Page button. The following offline package page is displayed.

    The offline package update is complete.