Android native communication with H5

Nowadays, hybrid development seems to have become the mainstream. H5 has the advantage of being cross-platform, but it has performance issues that can be solved by building a native shell to carry H5 code.

How to understand this approach is like saying that Android native code encapsulates the shell, and the internal code contains H5 as the core content. In more detail, we write the guide page, login page, home page and other pages that are closely related to the business and have more user interactions in native, while the business page and logic code are processed by H5. Combining them forms a hybrid development H5APP carried by the native shell.

[[238610]]

What are the benefits of doing this? For example, we have made an Android native APP in this way. Now we need to make an IOS native APP. We can simply build an IOS shell and reuse the H5 code to complete the IOS native APP. At the same time, we need to build it on platforms such as DingTalk and WeChat Mini Programs, and we can directly reuse our existing H5 code.

The advantage of this construction method over pure H5 APP is that due to the existence of native shell, native API can be used freely, ensuring smooth interaction.

How to achieve native communication with H5?

There are two issues we need to solve regarding communication:

• Native communication to H5
• H5 to native communication

The first problem is easy to solve. Take Android as an example. WebView provides a unique method. When you open an Html, you can call the JS contained in the Html. For example:

 webview.loadUrl( "javascript:callH5('Android ok')" );

We use the method of sending instructions to deal with the second problem. Taking Android as an example, WebView can intercept the URL address when HTML jumps. We can use this address to agree on a rule. If it meets the rule, the jump will not be executed after interception. We can obtain the information we need through this URL and perform the corresponding operation.

 window.location.href=protocol://android?code=toast&data=+Json.stringify(config)

The above is a JS page jump method. We set the rule PRE=protocol://android?. When the URL we intercept contains PRE, we think it is an instruction, and we do not need to jump to the page, but should execute the corresponding operation. The parameter code is the content of our instruction, and data is the parameter passed during communication.

Next is the native processing. First, we intercept the URL. Here, the author also handles the problem of ads appearing on the H5 page due to HTTP attacks. We mainly deal with the first if.

 webView.setWebViewClient(new WebViewClient() {  
 // Load opened URL in the application instead   of standard browser  
 //application  
 public boolean shouldOverrideUrlLoading(WebView view , String url) {  
 showLogInfo( "intercepted url----" +url);  
 String advertising= "http://" +sharedPreferencesUtil.getData(Constant.IP, RequestConfig.IP)  
 + ":" +sharedPreferencesUtil.getData(Constant.PORT,RequestConfig.IPPORT);  
 if ( url.contains (pre)) {  
 Map map = getParamsMap(url, pre);  
 String code = map.get( "code" );  
 String data = map.get( "data" );  
 parseCode(code, data);  
 return   true ;  
 } else if(!url. contains (advertising)){  
 showLogError( "Intercepted embedded advertisement, advertisement url——" + url);  
 return   true ;  
 } else {  
 return   false ;  
 }  
 }  
 });

Return true means the interception is successful and the subsequent jump operation is not executed. False means the normal process is executed. After the interception is successful, we get the code and data from the URL, and then we can process it according to our own needs.