Native-Javascript Bridging Using WKWebViews in iOS8
•
3 likes•3,447 views
This document discusses native to JavaScript bridging in WKWebViews on iOS. It provides an overview of WebKit and how it powers web views in native apps. It describes how WKWebViews improved upon UIWebViews by enabling features like JavaScript optimizations, multi-process loading, and simplified native to JS communication. The key methods for bridging discussed are user scripts to inject JS, evaluateJavaScript to call JS from native, and script messages to call native from JS. Code samples are provided for these bridging techniques.
Report
Share
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (20)
Similar to Native-Javascript Bridging Using WKWebViews in iOS8
Similar to Native-Javascript Bridging Using WKWebViews in iOS8 (20)
Native-Javascript Bridging Using WKWebViews in iOS8
- 1. www.priyaontech.com Native-JS Bridging Using WKWebViews Priya Rajagopal @rajagp
- 2. www.priyaontech.com WebKit • Rendering/Layout Engine for web content • Powers Safari & web views (Native Apps) • JS Processing • HTML/CSS rendering • Networking/ Web request response Handling
- 3. www.priyaontech.com Pre iOS8 • UIWebViews • UIKit.framework • In-process loading of web content • Limited • No JS Nitro optimizations • Many WebKit capabilities not exposed • Bridging between Native and JS a pain…
- 4. iOS 8
- 5. www.priyaontech.com Modern WebKit • Unified WebKit Framework across OS X 10.10 & iOS 8 • Safari & Native Apps • Multi-process Architecture • web page loaded in a separate process(upto a limit) • Hardware Accelerated Scrolling (60 fps) • JS Nitro Engine • Built-in Navigation Gestures (swipe back/forward, zoom…)
- 6. www.priyaontech.com Modern WebKit • Simplified Native <->JS Communication
- 7. www.priyaontech.com WKWebView Replaces UIWebView (iOS) WKWebView WKNavigationDelegate WKUIDelegate WKBackForwardList … WebKit.framework WKWebViewConfiguration WKUserContentController WKPreferences WKProcessPool allowsInlineMediaPlayback mediaPlaybackAllowsAirPlay …. - (instancetype)initWithFrame:(CGRect)frame configuration: (WKWebViewConfiguration *)configuration
- 8. www.priyaontech.com Native->JS • User Scripts (WKUserScript) • Inject JS into web page that … • Registers For Events • Customizes web page behavior • Calls back into Native
- 9. www.priyaontech.com User Scripts // Setup WKUserContentController instance WKUserContentController* userController = [[WKUserContentController alloc]init]; // Specify when and where and what user script needs to be injected into the web document WKUserScript* userScript = [[WKUserScript alloc]initWithSource:myScript injectionTime:WKUserScriptInjectionTimeAtDocumentEnd forMainFrameOnly:NO]; // Add the user script to the WKUserContentController instance [userController addUserScript:userScript]; // Configure the WKWebViewConfiguration instance with the WKUserContentController _webConfig.userContentController = userController;
- 10. www.priyaontech.com JS Evaluation - - (void)evaluateJavaScript:(NSString *)javaScriptString completionHandler:(void (^)(id, NSError *))completionHandler;
- 11. www.priyaontech.com JS->Native • Script Messages window.webkit.messageHandlers.<name>.postMessage(<messageBody>) • Register Script Message Handler in Native Implement WKScriptMessageHandler Protocol • JS Objects Auto mapped to Obj-C / Swift Objects
- 12. www.priyaontech.com Script Messages // Add a script message handler for receiving "MyEvent" event notifications posted from the JS document using window.webkit.messageHandlers.MyEvent.postMessage script message [userController addScriptMessageHandler:self name:@"MyEvent"]; // Implement WKScriptMessageHandler Protocol - (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message { if ([message.name isEqualToString:@“MyEvent”]) { // message.body is the Obj-C object } }