H5 and App native interaction scheme

H5 and App native interaction scheme

H5 and App native interaction, usually the front page of the JavaScript and App using the native development language interaction. The technical proposal shall meet the following requirements:

  • When the JS interacts with the native to ensure that the normal forward call logic return, the reverse can deal with asynchronous callback, because for JS, most of the logic is callback and listen.
  • To ensure that H5 and Native App communication efficiency, security, and can effectively prevent the H5 page through App injection, intermediate attack or fishing.
  • Convenient test phase, H5 embedded into the App among them, developers to facilitate debugging and Debug. The current mainstream technology scheme: 1 before iOS7, to achieve some good agreement with proxy method to intercept protocol Url in UIWebView, get to obtain the parameters from the Url transfer, mapped into local native methods, are as follows: – (BOOL) webView: (UIWebView * webView) shouldStartLoadWithRequest: (NSURLRequest * request navigationType: (UIWebViewNavigationType) NSString *urlString = request.URL.absoluteString navigationType{); if ([urlString rangeOfString:@ js-call://].location! = NSNotFound) {NSString host = [self * sliceHost:urlString] * params = [self; NSDictionary sliceParams:urlString]; if ([host “openOrderDetail” isEqualToString:@ “) {[self openOrderDetail:params]}}; return NO; return YES;} the only solution to the j S call native methods, as the result of the call for some pages and to call after the callback, in this process there is no way to intercept, but there are some crappy compensation measures are as follows: – (void) webViewDidFinishLoad: (UIWebView * webView) {self.orderDetailCallBackFuncName = [webView stringByEvaluatingJavaScriptFromString:@ (orderCallbackfuncName)] “name;} callback method set in the page loaded to get active on the page, and then in the original method processed again callback logic. – (void) OpenOrderDetail: (NSDictionary *) params{//do someting [self.webView stringByEvaluatingJavaScriptFromString:[NSString stringWithFormat:@ “(self.orderDetailCallBackFuncName),”% @ “;} 2.iOS7, all use JavaScriptCore the official WebKit JavaScript engine, OC and JavaScript language shuttle. – (void) configJsCallBack{WeakSelf; self.jsContext [self.webView valueForKeyPath:@ = “documentView.webView.mainFrame.javaScriptContext”]; self.jsContext.exceptionHandler = ^ (JSContext * con, JSValue * exception) {NSLog (@ JS Error:%@ “, exception);}; Coordinator coordinator = [[Coordinator * alloc]init]; self.jsContext[@” mobileCoordinator “] = coordinator; self.jsContext[@ = coordinator” console “] don’t know;} JavaScriptCore students can refer to the official document or learning materials. Here we use some skills, all App open to the JS method by a Coordinator scheduler to schedule, and the scheduler implements the JSExport protocol: #import < Foundation/Foundation.h&gt #import; < JavaScriptCore/JavaScriptCore.h> @protocol CoordinatorExport < JSExport> – (void) log: (NSString *) – BOOL (MSG; (callNativeModule:) NSString * URL); / * JS shareOpinion JSON calls the native shared object {“type”: “share”, “title”: “share title”, “content”: “share content”, “imgUrl”, “”, “clickUrl”: “type”} which types are the following share: (only a circle of friends and friends, doubleShare (WeChat), allShare contains all the shared channel) (share all channels) / JSExportAs (showShareMenu – (BOOL) showShareMenu: (NSStrin G URL opinion: (NSString) * *) opinion @end @interface); Coordinator: NSObject< CoordinatorExport > @property (nonatomic, copy) BOOL (^openShareCallBack) (NSDictionary * opinion); @end approach is that we will inject an object called mobileCoordinator to the JavaScript operating environment under the right conditions, the the object will be injected into the JavaScript window object in the environment, global availability. Why should the package to an object, because JS has no namespace concept and to find the variables increase, will cause naming conflicts, so we put the methods exposed are an object encapsulation. Another advantage is that JavaScript developers and app developers can write code like write their own language code, without grammar loss, JS synchronous call native methods, when native implementation of JS with the return value, the caller can obtain the return value, if it is an asynchronous callback, to provide a callback to the Senate when the foreign exposure method, in an asynchronous callback after completion.
    3 other programs, such as JavaScriptBridge, are similar to the second schemes. Scheme comparison: the process of scheme 1 is as follows:
    interactive way for the one-way
    H5 call Native:H5 page – > Url Redirect (launched carrying parameters with action semantic Url) -> Native App-> Url Redirect-&gt interception; analytic Action Semantic parameter – > call Native code calls the H5 Native page: Native App – &gt get on the page; reserved parameters and analytical parameters of -&gt action semantics; call JavaScript code for such a simple method that calls become very fragmented, and the double end maintenance cost is very high, not easy to debug. The process is as follows:
    2
    scheme for two-way interactive page: H5 (Native App &lt); -> call Native code (call JavaScript code) < -> Native App call Native code execution is returned to the calling results (H5 pages called JavaScript code and return the result of the call) scheme 2 obvious advantages, general use second. There are some things need to pay attention to the implementation details:
    1.oc method with parameter label, and no JS method, note the use of the JSExportAs macro to convert OC native language for the JS grammar style code.
    2 note to obtain jscontext context and injection method and object time, depending on the H5 page of the JS reference time, if the H5 page require to use sequential references, there won’t be a problem, and if the primary interactive JS code is loaded with native injection into the order of chaos, not to call the method the primary exposure may cause abnormal JS execution. The proposed combination of the way to intercept the URL to determine when to inject H5, or front-end engineers to sort out the specification, the H5 reference JS when doing sequence control. Prevent injection and fishing in fact, this is not a technical solution, but you can mention. Sometimes the mobile phone in dangerous network environment for example links in unsafe routers, DNS malicious to phishing sites, if the original page call known exposed method, synchronous data or call the key business, there will be a risk of injection attacks. The general need to do is call app when H5 in the primary key business, need to call native methods in primary afferent notes, through the server authentication center authentication ticket, can through the processing of the page request, in sync with the state, for example the user login app in sync to H5 page in general, app synchronous cookie, but the high cost of maintenance. For synchronization status and data, app should be used to pass the business notes to H5, H5 through the center of the bill to replace the real user status or critical business data. The higher level of the program and H5 and App temporary handshake. H5 in WebView Debug this is a disgusting thing, but we can replace the JS window object console object log function will be transferred to the primary output, and by some other way, JavaScriptCore provides exceptionHandlercontext.exceptionHandler (JSContext ^ *context, JSValue = *exception) {NSLog (JS @ Error: “% @ exception);}; the next article will introduce websocket protocol, app WebView in the output debugging information to the brain for the specified IP, facilitate the development of debugging, so it can reduce the communication debugging and cooperation, improve the development efficiency.