A Preliminary Study on JSBridge in Javascript

The origin of JSBridge

In recent years, mobile terminals have become more and more popular, and whether to choose Native or H5 in the development process has always been a hot topic. Native and H5 both have their own advantages and disadvantages. In order to meet business needs, companies often combine the two for hybrid development during the development of actual projects. Native and H5 are located in two different places and seem to be unconnected, so how can the two sides work together to achieve functions?

At this time, we thought of Codova, which provides a set of device-related APIs and is a common solution for early js to call native code to implement native functions. However, JSBridge is widely used in the country because of the popularity of mobile Internet.

JSBridge is a JS-implemented Bridge that connects Native and H5 at both ends of the bridge. It allows Native to call JS and JS to call Native conveniently within the APP, and it is a two-way communication channel. JSBridge mainly provides the ability for JS to call Native code to implement native functions such as viewing local photo albums, opening the camera, fingerprint payment, etc.

H5 vs Native

The bidirectional communication principle of JSBridge

JS calls Native

There are many ways to implement JS calling Native, mainly intercepting URL Scheme, rewriting prompt, injecting API and other methods.

Intercepting URL Scheme

Both Android and iOS can intercept the URL Scheme and parse the Scheme to decide whether to perform the corresponding Native code logic processing.

For Android, Webview provides the shouldOverrideUrlLoading method to allow Native to intercept the URL Scheme request sent by H5. The code is as follows:

public class CustomWebViewClient extends WebViewClient {
    @Override
    public boolean shouldOverrideUrlLoading(WebView view, String url) {
      ......
      // Scenario 1: Intercept request and receive scheme
        if (url.equals("xxx")) {

            // handle
            ...
            // callback
            view.loadUrl("JavaScript:setAllContent(" + json + ");")
            return true;
        }
        return super.shouldOverrideUrlLoading(url);
     }
}

iOS's WKWebview can perform related operations based on the intercepted URL Scheme and corresponding parameters. The code is as follows:

- (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler{
    if ([navigationAction.request.URL.absoluteString hasPrefix:@"xxx"]) {
        [[UIApplication sharedApplication] openURL:navigationAction.request.URL];
    }
    decisionHandler(WKNavigationActionPolicyAllow);
}

The advantages of this method are that there are no vulnerabilities, it is flexible to use, and it can achieve seamless switching between H5 and Native pages. For example, when a page needs to be launched quickly, an H5 page is developed first. If a link is filled in as an H5 link, it will jump to the H5 page before the corresponding Native page is developed. After the Native page is developed, it will be intercepted and jumped to the Native page. At this time, the H5 link does not need to be modified. However, using iframe.src to send the URL Scheme requires controlling the length of the URL, which is complex and slow.

Rewrite native JS methods such as prompt

Before Android 4.2, the interface for injecting objects was addJavaScriptInterface, but it is gradually being deprecated for security reasons. The operation is usually completed by modifying some methods of the browser's Window object. It mainly intercepts the four methods of alert, confirm, prompt and console.log, which are respectively monitored by onJsAlert, onJsConfirm, onConsoleMessage and onJsPrompt of Webview. The onJsPrompt monitoring code is as follows:

public boolean onJsPrompt(WebView view, String origin, String message, String defaultValue, final JsPromptResult result) {
  String handledRet = parentEngine.bridge.promptOnJsPrompt(origin, message,defaultValue);
  xxx;
  return true;
}

Due to the security mechanism of iOS, WKWebView intercepts methods such as alert, confirm, and prompt. If Native and JS interact in this way, you need to implement the three WKUIDelegate proxy methods of WKWebView. The code example is as follows:

-(void)webView:(WKWebView *)webView runJavaScriptAlertPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(void))completionHandler{

  UIAlertController *alertController = [UIAlertController alertControllerWithTitle:nil message:message?:@"" preferredStyle:UIAlertControllerStyleAlert];

  [alertController addAction:([UIAlertAction actionWithTitle:@"Confirm" style:UIAlertActionStyleDefault handler:^(UIAlertAction * _Nonnull action) {

      completionHandler();

  }])];

  [self presentViewController:alertController animated:YES completion:nil];

}

When using this method, you can agree with Android and iOS on the format of parameter passing, so that H5 can directly call Native by passing in different parameters without identifying the client. The rest is left to the client to intercept the same method, identify the same parameters, and perform its own processing logic to achieve consistent performance on multiple terminals. like:

alert("Are you sure xxx?", "Cancel", "OK", callback());

In addition, if you can determine the calling protocol specifications such as method name and parameter passing with Native, other formats of prompt and other methods will not be recognized, which can play an isolation role.

##### Injection API

Based on the capabilities provided by Webview, we can inject objects or methods into Window. When JS calls through this object or method, it performs the corresponding logical operation and can directly call the Native method. When using this method, JS needs to wait until Native finishes executing the corresponding logic before performing the operations in the callback.

Android's Webview provides the addJavascriptInterface method, which supports Android 4.2 and above.

gpcWebView.addJavascriptInterface(new JavaScriptInterface(), 'nativeApiBridge'); 
public class JavaScriptInterface {
    Context mContext;

  JavaScriptInterface(Context c) {
    mContext = c;
  }

  public void share(String webMessage){            
    // Native logic}
}

JS call example:

window.NativeApi.share(xxx);

iOS UIWebview provides the JavaScriptScore method, which supports iOS 7.0 and above. WKWebview provides the window.webkit.messageHandlers method, which supports iOS 8.0 and above. UIWebview was commonly used a few years ago, but it is not common now. The following is an example of creating a WKWebViewConfiguration and a WKWebView:

WKWebViewConfiguration *configuration = [[WKWebViewConfiguration alloc] init];
WKPreferences *preferences = [WKPreferences new];
preferences.javaScriptCanOpenWindowsAutomatically = YES;
preferences.minimumFontSize = 40.0;
configuration.preferences = preferences;
    

- (void)viewWillAppear:(BOOL)animated
{
    [super viewWillAppear:animated];
    [self.webView.configuration.userContentController addScriptMessageHandler:self name:@"share"];
      [self.webView.configuration.userContentController addScriptMessageHandler:self name:@"pickImage"];
}
- (void)viewWillDisappear:(BOOL)animated
{
    [super viewWillDisappear:animated];
    [self.webView.configuration.userContentController removeScriptMessageHandlerForName:@"share"];
    [self.webView.configuration.userContentController removeScriptMessageHandlerForName:@"pickImage"];
}

JS call example:

window.webkit.messageHandlers.share.postMessage(xxx);

Native calls JS

It is relatively simple for Native to call JS. All you need to do is expose the JS method on the Window for Native to call.

There are two main ways to implement it in Android. Before 4.4, this was achieved by executing a piece of JS code through the loadUrl method. After 4.4, this can be achieved using the evaluateJavascript method. The loadUrl method is convenient and concise to use, but it is inefficient and cannot return results, and it refreshes the WebView when it is called. The evaluateJavascript method is efficient and easy to get the return value. It does not refresh the WebView when called, but it only supports Android 4.4+. The relevant code is as follows:

webView.loadUrl("javascript:" + javaScriptString);
webView.evaluateJavascript(javaScriptString, new ValueCallback<String>() {
  @Override
  public void onReceiveValue(String value){
    xxx
  }
});

iOS can be implemented in WKWebview through evaluateJavaScript:javaScriptString, which supports iOS 8.0 and above.

// swift
func evaluateJavaScript(_ javaScriptString: String, 
    completionHandler: ((Any?, Error?) -> Void)? = nil)
// javascriptString JS code to be called // completionHandler callback after execution // objective-c
[jsContext evaluateJavaScript:@"ZcyJsBridge(ev, data)"]

Use of JSBridge

How to Cite

• This method was used by H5 when it was referenced in the initial version of our mobile terminal, and the call was made by locally introducing the npm package. This method can confirm that JSBridge exists and call the Native method directly. However, if the implementation of Bridge changes later, both parties need to make more compatibility, and the maintenance cost is high.
• Native injection is the method currently used by our mobile terminal. Taking into account the future business needs, a redesign was carried out, and the Native injection method was used to reference JSBridge. This helps maintain consistency between the API and Native, but the disadvantage is that the method and timing of Native injection are limited. Before JS calls Native, it is necessary to determine whether JSBridge has been injected successfully.

Usage Guidelines

Pseudo code example of H5 calling Native method, such as:

params = {
  api_version: "xxx", // API version title: "xxx", // Title filename: "xxx", // File name image: "xxx", // Image link url: "xxx", // URL link success: function (res) {
    xxx; //Execute after successful call},
  fail: function (err) {
    if (err.code == '-2') {
      fail && fail(err); // The API version that does not exist in the current client was called } else {
      const msg = err.msg; //Exception information Toast.fail(msg);
    }
  }
};
window.NativeApi.share(params);

The following briefly lists the abstractions of common methods. Currently, two-way communication basically follows the following specifications.

window.NativeApi.xxx({
    api_version:'',
    name: "xxx",
    path: "xxx",
    id: "xxx",
    success: function (res) {
      console.log(res);
    },
    fail: function (err) {
      console.log(err);
    }
});

Since the initial version chose to use JSBridge locally in H5, the later version adopted the Native injection method. The existing H5 needs to be compatible with various situations. The logical abstraction is as follows:

reqNativeBridge(vm, fn) {
  if (!isApp()) {
    // If the call is not made in the APP vm.$dialog.alert({
      message: "This function requires access to the APP to use",
    });
  } else {
    if (!window.NativeApi) {
      // For early versions vm.$dialog.alert({
        message: "Please update to the latest APP to use this function",
      });
    } else {
      // Here we only handle the error message of "calling an API version that does not exist in the current client" // Other types of error information are handled by specific businesses fn && fn((err) => {
        vm.$dialog.alert({
          message: "Please update to the latest APP to use this function",
        });
      });
    }
  }
}

Summarize

The above content briefly introduces some principles of JSBridge. I hope it will be helpful to students who have never known JSBridge. If you need a deeper understanding of the principles and implementation of JSBridge, such as the encapsulation implementation of JSBridge interface calls, the uniqueness of callbacks when JS calls Native, etc. You can check for more information, refer to more detailed related documents or other people's compiled and written precipitation.

The above is the detailed content of the initial exploration of JSBridge in Javascript. For more information about JSBridge in Javascript, please pay attention to other related articles on 123WORDPRESS.COM!