Mobile Platform as a Service:FAQ of using HTML5 in iOS

How to solve the problem of H5 container positioning offset?

A: You may encounter the problem of H5 container positioning offset when using mPaaS containers. Please refer to the following methods to update the settings:

- (void)application:(UIApplication *)application beforeDidFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{

    // Skip LBS targeting
    [LBSmPaaSAdaptor sharedInstance].shouldSkipLBSLocation = YES;

    .......
    
}

Preset offline packages do not take effect when using the file H5_json.json.

A: In baseline 10.1.32, only .plist files are supported. In baseline 10.1.60, both .plist and .json files are supported.

How to obtain information on applications installed with offline packages?

A: Refer to this code: NSDictionary *installedApps = [NAMServiceGet() installApps:nil];.

How to force update of all offline packages’ information?

A: You may use the encapsulated method requestAllNebulaApps to perform a full update.

[[MPNebulaAdapterInterface shareInstance]requestAllNebulaApps:^(NSDictionary *data, NSError *error) {

 }];

In iOS 13, the component vux-ui pulldown may hang during a scrolling operation in the HTML5 container.

A: This problem occurs because a bug of UIWebview is triggered in the iOS operating system. You may consider switching to WKWebview or changing the front-end components. To learn how to switch to WKWebview, see mPaaS 10.1.60 adapts WKWebView.

How to view all JSAPIs and plug-ins registered by the current application?

A: Open an HTML5 page, enter the Xcode View hierarchy page, and use po [[PSDService sharedInstance] jsApis] in the lldb console to view all JSAPIs . Similarly, use po [[PSDService sharedInstance] plugins] to view all registered plug-ins.

How to obtain UIViewController and Webview objects of current HTML5 page in a JSAPI or plug-in?

A: During the actual execution, in a plug-in you can directly obtain the parameter event.context, in a JSAPI you can obtain context, in the context object PSDContext you can obtain all information or references you want, for example, reference to the current controller event.currentViewController and reference to the current WebView context.currentViewController.psdContentView.

How to obtain startup parameters passed from front end upon loading of current page?

A: Directly obtain attribute of the current VC psdScene.createParam.expandParams.

How to allow a JSAPI work within a certain offline package only?

A: Within the actual execution method of JSAPI, obtain appId of the offline package for the current page and then decide whether to execute the logic.

How to block page URL?

A: You can implement this by customizing a plug-in and then monitoring the related event.

• Monitored event name:

[PSDProxy addEventListener:kEvent_Proxy_Request_Start_Handler withListener:self useCapture:YES];
`

• Implement the blocking:

else if ([kEvent_Proxy_Request_Start_Handler isEqualToString:event.eventType]
        && [event isKindOfClass:[PSDProxyEvent class]] ){
        NSLog(@"-----kNBEvent_Scene_NavigationItem_Right_Setting_Click----");
        PSDProxyEvent *proxyEvent = (PSDProxyEvent*) event;
        NSMutableURLRequest *redirectReq = proxyEvent.request.mutableCopy;
        NSString *appId = event.context.currentSession.createParam.expandParams[@"appId"];
        NAMApp *app = [NAMServiceGet() findApp:appId version:nil];
        NSString *fallBackUrl = app.fallback_host;
        NSString *vhost = app.vhost;;
        NSString *url = redirectReq.URL.absoluteString;
        NSLog(@"url__%@______fallBackUrl:%@",url,fallBackUrl);
       if ([url containsString:@"www.baidu.com"]) {
           [proxyEvent preventDefault];
 }}

How to manually invoke JSAPI in Native?

A: You can directly invoke the callHandler method of the base class for the current page. See the following source code for an example.

After the console releases new version of offline packages, the client cannot successfully load the new offline packages.

A: Before viewing the solution to this problem, make sure you already understand How are offline packages updated. If the client cannot successfully load the new packages, rendering of offline packages can generate errors at any stage. We can troubleshoot this problem using the following steps.

• View the result returned by the RPC for fully updating offline packages. In the console, search for bizType: 4 Double-check details of the returned offline package and confirm that the latest package information was obtained from the console.

• If you found no problem in the previous step, then check if the offline packages in the sandbox directory were successfully decompressed. Note: If the current offline package references contents in the global resource package, then the decompressed directory must also contain the global resource package.

  

• If you did not find the corresponding offline packages in the sandbox directory in the previous step, you can temporarily turn off signature verification of offline packages, delete the app and run again. If the loading returns to normal after you turn off signature verification, it suggests that the private key used to create signatures for the offline packages are inconsistent with the public key used to verify signatures in the client. To resolve this problem, you need to update the corresponding public key information in the client.

• If you found no problem in all the previous steps and this problem persists, you can use Safari to debug the corresponding HTML5 page and view actual cause of the errors. Examples of the causes include incorrect path of global resource package and invalid URL for loading the offline packages.

  

Why is it that I see a blank page or the 400 error code when opening HTML5 page of an offline package?

A: Usual cause of the blank page or 400 error code is: The local offline package fails to load and thus the online fallback address is used. But because fallback address of the corresponding page does not exist, the page fails to load.

• Find out why the client fails to load offline packages using the steps in the previous topic.

• Regarding the problem of failing to load the online fallback address, ensure correct version of the corresponding offline package was generated and already uploaded using the console, including normal offline package and global resource package. For more details, see Generate offline packages.

• If a preset offline package has an invalid online fallback address, first ensure the same preset offline package was also uploaded using the console.

• Ensure fallback_base_url in the local preset package information fallback_base_url and fallback_base_url in the configuration file h5_json.json downloaded from the console fallback_base_url are the same.

  

• And fallback_base_url + main_url the combined address “fallback_base_url + main_url” can be loaded normally in a web browser.

  

How to disable the swipe gesture for returning to previous page in an HTML5 page?

A: You may disable this gesture in a front-end HTML5 page or in the base class of a native HTML5 container.

• Disable the gesture in a front-end HTML5 page: Invoke setGestureBack JSAPI to implement this. Use this method when you need to disable the swipe gesture for returning to the previous page in a certain HTML5 page.

AlipayJSBridge.call('setGestureBack',{val:false});

• Disable the gesture in the base class of a native HTML5 container: In the method viewDidAppear of the base class, invoke API of the system for disabling this gesture and set the parameter guestBack. Use this method when you need to disable the swipe gesture for returning to the previous page in multiple or all HTML5 pages.

   - (void)viewDidAppear:(BOOL)animated {
        [super viewDidAppear:animated];
  
        self.options.gestureBack = NO;
        if ([self.navigationController respondsToSelector:@selector(interactivePopGestureRecognizer)]) {
            self.navigationController.interactivePopGestureRecognizer.enabled = NO;
        }
    }

How to judge whether the current page is a page within a mini program?

A: Obtain session of the current page, and invoke isTinyAppWithSession isTinyAppWithSession to judge this. The code sample is as follows:

PSDSession *session = self.psdSession;
BOOL isTinyApp = [NBUtils isTinyAppWithSession:session];

How does an HTML5 page pass custom parameters?

A: Based on the ways to pass parameters, the following scenarios exist:

• Native HTML5: When invoking the method startH5ViewControllerWithParams , pass [[MPNebulaAdapterInterface shareInstance] startH5ViewControllerWithParams:@{@"url": @"https://tech.antfin.com", @"key1":@"value1"}];.

• Native - offline package: When invoking the method startH5ViewControllerWithNebulaApp , pass [[MPNebulaAdapterInterface shareInstance] startH5ViewControllerWithNebulaApp:@{@"appId":@"70000000",@"param":@{@"key2":@"value2"}}];.

• HTML5 - HTML5: When invoking pushWindow put the custom parameters in passData :

AlipayJSBridge.call('pushWindow', {
 // URL of the page to be opened
  url: 'https://m.taobao.com/',
  // Configuration parameters of the opened page
  param: {
    readTitle: true,    // Automatically read title
    showOptionMenu: false, // Hide menu on the right
transparentTitle:'always',
  },
  // Optional, used for transferring parameters to a newly opened page.
  // Use AlipayJSBridge.startupParams to obtain passData on a newly opened page.
  passData: {
    key1: "key1Value",
    key2: "key2Value"
  }
});

• HTML5 - offline package: When invoking startApp JSAPI, put the custom parameters in param:

AlipayJSBridge.call('startApp', {
  appId: '70000000',
  param: {
key1:'value1'
  }
}, function(result) {
  // noop
});

How to obtain parameters passed from an HTML5 page?

A: You can obtain them either from the front end or Native:

• Obtain from front end: Obtain using the method startupParams.

// Startup parameters of the current page.
AlipayJSBridge.startupParams

• Obtain from Native: Obtain using the VC object for the current page.

// Startup parameters of the current page.
NSDictionary *expandParams = self.psdScene.createParam.expandParams;
NSLog(@"[mpaas] expandParams: %@", expandParams);

How to block JSAPI invocation?

A: You can implement this by customizing a plug-in and then monitoring the related event.

• Monitored event name:kEvent_Invocation_Event_Start.

• Perform the blocking: Obtain information including the name and passed parameters of JSAPI.

  else if([kEvent_Invocation_Event_Start isEqualToString:event.eventType]) {
   PSDInvocationEvent * invocationEvent = (PSDInvocationEvent *)event;
   NSString * apiName = invocationEvent.invocationName;
   if([apiName isEqualToString:@"setOptionMenu"] || [apiName isEqualToString:@"showOptionMenu"] ) {
   NSLog(@"wwww");
   }
   }

WebView embedded in the homepage, what to do if the H5 container cannot be released?

Background: There are some special scenarios where the WebView of the H5 container of the offline package needs to be nested on the App homepage.When the super view of WebView is destroyed, the H5 container may not be destroyed, which will lead to memory leak problems.

The code sample is as follows:

A: You can try to handle it in the following codes.