iOS Native and JavaScript Interaction

When it comes to the interaction between Native and JS, we have to mention the HyBird Mobile App.

The translation result of Hybird is not very civilized (wipe your sweat, I don’t know why many translation software translates it as “bastard”, but I prefer to translate it as “mixed, mixed blood”). My understanding of Hybird App is a hybrid mobile application that combines Web network technologies (such as HTML, CSS and JavaScript) with Native.

So let's take a look at the advantages and disadvantages of Hybird compared to Native:

Because of Hybird's flexibility (changing the JS in the web page can take effect directly without re-publishing) and versatility (one H5 can be used in public accounts, Android, and iOS) and low threshold (front-end players can get started easily), it may be slightly better to use the Web through Hybird in non-core functional modules. Native can provide strong support for JS in calling core functions and device hardware.

Although many technologies such as RN and Weex, which use JS to write Native directly, have emerged, which have had a great impact on Hybird App, many domestic companies, including large companies, have not completely abandoned Hybird due to its low technical threshold (almost no learning cost) and other reasons. After all, the right one is the best!

The History of Hybird

H5 Release

Html5 was officially released in September 2014. The biggest change in this release was "upgrading from the previous XML subset to an independent set."

[[206753]]

H5 Infiltration into Mobile App Development

In Native APP development, there is a webview component (webview in Android, UIWebview and WKWebview in iOS), which can load Html files.

Before H5 became popular, the web pages loaded by webview were monotonous (because it could only load some static resources). But since H5 became popular, with the help of many bionic frameworks, the H5 pages developed by front-end players have a good experience in webview, which makes H5 development gradually penetrate into Mobile App development.

Hybird’s Current Status

Although there are technologies such as RN and Weex that use JS to write Native, Hybird has not been eliminated. Most applications on the market have referenced web pages to varying degrees, and how JS in web pages interact with Native is still a skill that every iOS user must master.

JavaScriptCore

Excuse me, before I get to the point, let me talk a little more. JavaScriptCore is a library added by Apple after iOS 7, which has a revolutionary impact on the interactive calls between iOS Native and JS.

JavaScriptCore is generally composed of 4 classes and 1 protocol:

• JSContext is the JS execution context, you can think of it as the environment in which JS runs.
• JSValue is a reference to a JavaScript value. Any value in JS can be wrapped as a JSValue.
• JSManagedValue is a wrapper for JSValue, adding "conditional retain"
• JSVirtualMachine represents an independent environment for JavaScript execution

There is also the JSExport protocol:

Implements a protocol that exports an Objective-C class and its instance methods, class methods, and properties as JavaScript code.

The JSContext, JSValue, and JSManagedValue here are relatively easy to understand. Let's take JSVirtualMachine out for explanation:

Usage of JSVirtualMachine and its relationship with JSContext

Introduction to official documents:

A JSVirtualMachine instance represents an isolated environment for JavaScript execution. You use this class for two main purposes: to support concurrent JavaScript execution, and to manage the memory of objects that bridge between JavaScript and Objective-C or Swift.

Regarding the use of JSVirtualMachine, we generally do not need to manually create a JSVirtualMachine because when we obtain a JSContext, the obtained JSContext is subordinate to a JSVirtualMachine.

Each JavaScript context (JSContext object) belongs to a JSVirtualMachine. Each JSVirtualMachine can contain multiple contexts, allowing values ​​(JSValue objects) to be passed between contexts. However, each JSVirtualMachine is different - you cannot pass a value created in one JSVirtualMachine to a context in another JSVirtualMachine.

The JavaScriptCore API is thread-safe - for example, you can create JSValue objects or run JS scripts from any thread - however, all other threads trying to use the same JSVirtualMachine will be blocked. To run JavaScript scripts simultaneously (concurrently) on multiple threads, use a separate JSVirtualMachine instance for each thread.

JSValue and JavaScript conversion table

iOS and JS interaction

For the interaction between iOS Native and JS, we first divide it into two situations from the calling direction:

• JS calls iOS Native
• iOS Native calls JS

JS calls iOS Native

In fact, there are two ways to implement JS calling iOS Native:

• Fake Request method
• JavaScriptCore Methods

Fake Request method

Principle: In fact, this method uses the proxy method of webview to intercept the request when webview starts to request and determine whether the request is a fake request as agreed. If it is a fake request, it means that JS wants to call our Native method according to the agreement, and we just need to execute our Native code according to the agreement.

UIWebView

UIWebView proxy is used to intercept the request proxy function, just make the judgment in it:

 - (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType {
 NSURL *url = request.URL;
 //Compare with the agreed function name
    if ([[url scheme] isEqualToString:@ "your_func_name" ]) {
 // just do it
 }
 }

WKWebView

WKWebView has two delegates, one is WKNavigationDelegate and the other is WKUIDelegate. We need to set and implement its WKNavigationDelegate method:

 - (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler {
    NSURL *url = navigationAction.request.URL;
 //Compare with the agreed function name
    if ([[url scheme] isEqualToString:@ "your_func_name" ]) {
 // just do it
        decisionHandler(WKNavigationActionPolicyCancel);
 return ;
 } 
     
    decisionHandler(WKNavigationActionPolicyAllow);
 }

Note: decisionHandler is the block to be called when your application decides whether to allow or cancel navigation. The block takes a single parameter, which must be one of the constants of the enumeration type WKNavigationActionPolicy. Failure to call decisionHandler will cause a crash.

Here is the JS code:

 function callNative(){
    loadURL( "your_func_name://xxx" );
 }

Then just use a button tag:

 <button type= "button" onclick= "callNative()" >Call Native!</button>

Call Native!

In fact, here is a practical example. I wrote an article before. Due to adaptation reasons, a fake request was adopted to solve the problem. The link to the article is posted here. If you want to read it, you can go and have a look.

JavaScriptCore Methods

iOS 7 has JavaScriptCore which is used for interaction between iOS Native and JS. We can get JSContext after webview is loaded, and then use JSContext to reference the object in JS and respond to it with Native code:

 // First import the JavaScriptCore library
 #import<JavaScriptCore/JavaScriptCore.h> 
 
 // Then in the UIWebView's completed loading delegate method
 - (void)webViewDidFinishLoad:(UIWebView *)webView {
 // Get the JS context
    jsContext = [webView valueForKeyPath:@ "documentView.webView.mainFrame.javaScriptContext" ];
 // Make a reference, and interpret the elements in JS. For example, methods can be interpreted as blocks, and objects can also point to Native objects in OC.
    jsContext[@ "iosDelegate" ] = self;
    jsContext[@ "yourFuncName" ] = ^(id parameter){
 // Note that the thread here defaults to the web processing thread. If the main thread operation is involved, you need to manually switch to the main thread
        dispatch_async(dispatch_get_main_queue(), ^{
 // your code
 });
 }
 }

The JS code is even simpler. We simply declare an unexplained function (with a pre-agreed name) to reference Native:

 var parameter = xxx;  
 yourFuncName(parameter);

iOS Native calls JS

The implementation method of iOS Native calling JS is also divided by JavaScriptCore:

• Webview directly injects JS and executes it
• JavaScriptCore Methods

Webview directly injects JS and executes it

• On iOS, webview has an API for injecting and executing JS.

UIWebView

UIWebView has a method to directly inject JS:

 NSString *jsStr = [NSString stringWithFormat:@ "showAlert('%@')" , @ "alert msg" ];  
 [_webView stringByEvaluatingJavaScriptFromString:jsStr];

Note: This method returns the result of running JS (nullable NSString *), it is a synchronous method and will block the current thread! Although this method is not deprecated, the best practice is to use the evaluateJavaScript:completionHandler: method of the WKWebView class.

Official documentation:

The stringByEvaluatingJavaScriptFromString: method waits synchronously for JavaScript evaluation to complete. If you load web content whose JavaScript code you have not vetted, invoking this method could hang your app. Best practice is to adopt the WKWebView class and use its evaluateJavaScript:completionHandler: method instead.

WKWebView

Unlike UIWebView, WKWebView's method of injecting and executing JS will not block the current thread. This is because the JS code in the web content loaded by the webview may not be verified, and if the thread is blocked, the App may be suspended.

 NSString *jsStr = [NSString stringWithFormat:@ "setLocation('%@')" , @ "No. xx, Nafu Hutong, Nanluoguxiang, Dongcheng District, Beijing" ];
 [_webview evaluateJavaScript:jsStr completionHandler:^(id _Nullable result, NSError * _Nullable error) {
    NSLog(@ "%@----%@" , result, error);
 }];

Note: The method does not block the thread, and its callback code block always runs in the main thread.

Official documentation:

• Evaluates a JavaScript string.
• The method sends the result of the script evaluation (or an error) to the completion handler. The completion handler always runs on the main thread.

JavaScriptCore Methods

The JSValue class provided by the JavaScriptCore library was briefly mentioned above. Here is the translation of the official documentation on JSValue:

A JSValue instance is a reference to a JavaScript value. You can use the JSValue class to convert primitive values ​​(such as numbers and strings) between JavaScript and Objective-C or Swift to pass data between native code and JavaScript code.

However, you can also see the OC and JS data type conversion table I posted above, which is not limited to the basic values ​​mentioned in the official documentation. If you are not familiar with JS, let me explain why JSValue can also point to objects and functions in JS, because the JS language does not distinguish between basic values ​​and objects and functions, and in JS "everything is an object".

Okay, let’s show the code directly below:

 // First import the JavaScriptCore library
 #import<JavaScriptCore/JavaScriptCore.h> 
 
 // Get the JS context first
 self.jsContext = [webView valueForKeyPath:@ "documentView.webView.mainFrame.javaScriptContext" ];
 // If UI operations are involved, switch back to the main thread and call YourFuncName in the JS code, passing in parameters through the array @[parameter]
 dispatch_async(dispatch_get_main_queue(), ^{
    JSValue *jsValue = self.jsContext[@ "YourFuncName" ];
    [jsValue callWithArguments:@[parameter]];
 });

The above code calls the YourFuncName function in the JS code and adds @[parameter] as an input parameter to the function. For easier reading, here is some more JS code:

 function YourFuncName(arguments){
 var result = arguments;
 // do what u want to do
 }

Unique method for WKWebView to interact with JS

[[206755]]

The differences between WKWebView and UIWebView are not explained in detail in this article. Please refer to the following for more information. Here we will talk about the unique methods of WKWebView when interacting with JS:

• WKUIDelegate Methods
• MessageHandler Methods

WKUIDelegate Methods

As mentioned above, WKWebView has a WKUIDelegate in addition to WKNavigationDelegate. What is this WKUIDelegate used for?

The WKUIDelegate protocol contains some functions that are triggered when the web JS wants to display an alert or confirm. If we load a web in WKWebView and want the web JS alert or confirm to pop up normally, we need to implement the corresponding proxy method.

Note: If the corresponding proxy method is not implemented, the webview will behave according to the default operation.

• Alert: If you do not implement this method, the web view will behave as if the user selected the OK button.
• Confirm: If you do not implement this method, the web view will behave as if the user selected the Cancel button.

Let's take alert as an example, and I believe that readers can draw inferences from it. The following is an example of using Native UIAlertController to replace the alert display in JS in the WKUIDelegate proxy method that monitors the web to display alerts:

 - (void)webView:(WKWebView *)webView runJavaScriptAlertPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(void))completionHandler {
 //Use Native's UIAlertController pop-up window to display the information that JS will prompt
    UIAlertController *alert = [UIAlertController alertControllerWithTitle:@ "Reminder" message:message preferredStyle:UIAlertControllerStyleAlert];
    [alert addAction:[UIAlertAction actionWithTitle:@ "Got it" style:UIAlertActionStyleCancel handler:^(UIAlertAction * _Nonnull action ) {
 // The completionHandler must be called in the function
 completionHandler();
 }]]; 
     
    [self presentViewController:alert animated:YES completion:nil];
 }

MessageHandler Methods

MessageHandler is another method for JS to call Native after Native intercepts JS fake requests. This method uses the new features of WKWebView. Compared with the method of intercepting fake requests, MessageHandler is simpler and more convenient to pass parameters.

What does MessageHandler mean?

The WKUserContentController class has one method:

 - (void)addScriptMessageHandler:(id)scriptMessageHandler name :(NSString *) name ;

This method is used to add a script processor, which can process the method called by the JS script in the processor, so as to achieve the purpose of JS calling Native.

So what does the WKUserContentController class have to do with WKWebView?

In the initialization function of WKWebView, there is an input parameter configuration, whose type is WKWebViewConfiguration. WKWebViewConfiguration contains a property userContentController, which is an instance of the WKUserContentController type. We can use this userContentController to add script processors with different names.

MessageHandler Pitfalls

So let's go back to the - (void)addScriptMessageHandler:name: method. This method adds a script message handler (the first input parameter scriptMessageHandler) and gives the handler a name (the second input parameter name). However, there is a pitfall when using this function: the scriptMessageHandler input parameter will be strongly referenced. If you use the UIViewController where the current WKWebView is located as the first input parameter, this viewController is owned by the webview.configuration. userContentController it owns, which will cause a circular reference.

Generally, we use - (void)removeScriptMessageHandlerForName: method to remove the strong reference of userContentController to viewController. So generally, our code will add and remove MessageHandler in pairs in viewWillAppear and viewWillDisappear:

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

WKScriptMessageHandler Protocol

WKScriptMessageHandler is a script message handler protocol. If you want an object to have script message handling capabilities (such as the viewController to which the webview belongs, which is self in the above code), you must make it follow this protocol.

WKScriptMessageHandler is very simple internally, with only one method, which we must implement (@required):

 // WKScriptMessageHandler protocol method, triggered when receiving script information
 - (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message {
 // message has two properties: name and body
 // message.name can be used to distinguish the processing to be done
    if ([message. name isEqualToString:@ "YourFuncName" ]) {
 // message.body is equivalent to the parameter passed by JS
        NSLog(@ "JS call native success %@" , message.body);
 }
 }

As usual, add the JS code:

 // Replace < name > with YourFuncName, and <messageBody> with the parameters you want
 window.webkit.messageHandlers.< name >.postMessage(<messageBody>)

Done!

Summarize

• This article briefly introduces the Hybird Mobile App (including a brief history of Hybird's development).
• Introduced the composition of JavaScriptCore, and used pictures to describe the relationship between JSVirtualMachine, JSContext and JSValue, which is not clearly explained in many articles. (JSVirtualMachine contains JSContext and JSValue, which are 1 to n relationships, and because the codes under the same JSVirtualMachine will block each other, if you want to execute asynchronously, you need to declare JSVirtualMachine in different threads for concurrent execution)
• From the perspective of calling direction, the methods and ways of calling each other between JS and iOS Native are explained with code.
• ***Added methods specific to WKWebView's interaction with JS: WKUIDelegate and MessageHandler.

If you think my article is wrong, please correct me. Your correction will help me avoid misleading many people.