www.priyaontech.com
Native-JS Bridging
Using WKWebViews
Priya Rajagopal
@rajagp
www.priyaontech.com
WebKit
• Rendering/Layout Engine for web content
• Powers Safari & web views (Native Apps)
• JS Proces...
www.priyaontech.com
Pre iOS8
• UIWebViews
• UIKit.framework
• In-process loading of web content
• Limited
• No JS Nitro op...
iOS 8
www.priyaontech.com
Modern WebKit
• Unified WebKit Framework across OS X 10.10 & iOS 8
• Safari & Native Apps
• Multi-proce...
www.priyaontech.com
Modern WebKit
• Simplified Native <->JS Communication
www.priyaontech.com
WKWebView
Replaces UIWebView (iOS)
WKWebView
WKNavigationDelegate
WKUIDelegate
WKBackForwardList
…
Web...
www.priyaontech.com
Native->JS
• User Scripts (WKUserScript)
• Inject JS into web page that …
• Registers For Events
• Cus...
www.priyaontech.com
User Scripts
// Setup WKUserContentController instance
WKUserContentController* userController = [[WKU...
www.priyaontech.com
JS Evaluation
-
- (void)evaluateJavaScript:(NSString *)javaScriptString
completionHandler:(void (^)(id...
www.priyaontech.com
JS->Native
• Script Messages
window.webkit.messageHandlers.<name>.postMessage(<messageBody>)
• Registe...
www.priyaontech.com
Script Messages
// Add a script message handler for receiving "MyEvent" event notifications
posted fro...
Demo
https://github.com/rajagp/iOS-WKWebViewBridgeExample-ObjC
https://github.com/rajagp/iOS-WKWebViewBridgeExample-Swift
Thank you!
@rajagp
of 14

Native-Javascript Bridging Using WKWebViews in iOS8

iOS8 introduced the modern webkit framework and with it, introduced the WKWebView as an alternate to the UIWebView for loading JS content within your native apps. This short presentation focusses on the enhancements that greatly simplify communication between Native and JS code loaded using WKWebViews.
Published on: Mar 3, 2016
Published in: Mobile      
Source: www.slideshare.net


Transcripts - 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 } }
  • 13. Demo https://github.com/rajagp/iOS-WKWebViewBridgeExample-ObjC https://github.com/rajagp/iOS-WKWebViewBridgeExample-Swift
  • 14. Thank you! @rajagp

Related Documents