Use H5 offline packages

Publish an offline package

Before you use an H5 offline package, prepare a zip package of a frontend application. If you do not have a frontend offline package, you can download the provided sample offline package.

1. Configure offline package information for the application in the console. For more information, see Configure an offline package.

2. Generate an offline package for your frontend application, or use the sample offline package. For more information, see Generate an offline package.

3. Create and upload the offline package in the console. For more information, see Create an offline package.

4. Publish the configured offline package to your client application. For more information, see Publish an offline package.

Click Video tutorial to watch the related video tutorial.

Add a preset offline package

1. Download the offline package AMR file and the offline package configuration file from the console.

2. In MyH5Application_offpack/Resources, create DemoCustomPresetApps.bundle. Delete the contents of the bundle, and then add the downloaded AMR file and configuration file to this bundle.

3. Register the preset offline package with the container. Assign the path of the plist file that contains the preset package information to presetApplistPath and the package path to appPackagePath. Then, call initNebulaWithCustomPresetApplistPath to initialize the container. You have now added a preset offline package.

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

Click Video tutorial to watch the related video tutorial.

Start the offline package

1. Add code to MyH5Application_offpack/Sources/DemoViewController.m to create button4. Clicking this button calls an API to open the offline package page.

        UIButton *button4 = [UIButton buttonWithType:UIButtonTypeCustom];
        button4.frame = CGRectMake(30, 150, [UIScreen mainScreen].bounds.size.width-60, 44);
        button4.backgroundColor = [UIColor blueColor];
        [button4 setTitle:@"Open Offline Package Page" forState:UIControlStateNormal];
        [button4 addTarget:self action:@selector(startOffPack) forControlEvents:UIControlEventTouchUpInside];
    [self.view addSubview:button4];

2. In MyH5Application_offpack/Sources/DemoViewController.m, add the implementation code for button4 to start the offline package. The 80000000 parameter is the APPID of the offline package.

    - (void)startOffPack
    {
        [[MPNebulaAdapterInterface shareInstance] startH5ViewControllerWithNebulaApp:@{@"appId":@"80000000"}];
    }

3. Compile the project and install the application on your phone. The application interface appears as shown.

4. Click Open Offline Package Page to open the preset web page from the offline package. The page is shown in the figure. You have now started the offline package.

Click Video tutorial to watch the related video tutorial.

Update the offline package

1. Add code to MyH5Application_OfflinePackage/Sources/DemoViewController.m to create a button named button5. When the button is clicked, it calls an interface to open the offline package page.

    UIButton *button5 = [UIButton buttonWithType:UIButtonTypeCustom];
    button5.frame = CGRectOffset(button4.frame, 0, 80);
    button5.backgroundColor = [UIColor blueColor];
    [button5 setTitle:@"Update Offline Package" forState:UIControlStateNormal];
    [button5 addTarget:self action:@selector(updateOffPack) forControlEvents:UIControlEventTouchUpInside];
    [self.view addSubview:button5];

2. In MyH5Application_offpack/Sources/DemoViewController.m, add the implementation code for button5 to update the offline package.

    - (void)updateOffPack
    {
        [[MPNebulaAdapterInterface shareInstance] requestNebulaAppsWithParams:@{@"80000000":@"*"} finish:^(NSDictionary *data, NSError *error) {
            NSString *result = @"No new package is published on the server";
            if (!error && [data[@"data"] count] > 0) {
                result = [NSString stringWithFormat:@"%@", data[@"data"]];
            }
   
            dispatch_async(dispatch_get_main_queue(), ^{
                UIAlertView* alertView = [[UIAlertView alloc] initWithTitle:@"Offline package updated" message:result delegate:nil cancelButtonTitle:@"OK" otherButtonTitles:nil, nil];
                [alertView show];
            });
        }];
    }

3. Compile the project and install the application on your phone. The application interface appears as shown.

4. Now, click the Open Offline Package Page button. The following page is displayed.

5. Click the Update Offline Package button. A toast message appears that says No new package is published on the server.

6. Update the offline package file. Upload and publish it in the console. In this example, the update changes the button text to Update 20190826.

   

   Note

   When you upload a new offline package version in the console to update the client, specify the supported client version range. This range is defined by minimum and maximum version numbers. Only clients within this version range receive the new package push. You can find the client version information in the product version field of the info.plist file in the client project.

7. In the application, click the Update Offline Package button. A toast message that says Offline package updated appears, as shown in the following figure.

8. Now, click the Open Offline Package Page button. The following page is displayed.

   You have now updated the offline package.

Click Video tutorial to watch the related video tutorial.