Download as PDF, PPTX
![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;](https://image.slidesharecdn.com/app-js-bridge-3-150416210553-conversion-gate01/85/Native-Javascript-Bridging-Using-WKWebViews-in-iOS8-9-320.jpg)
![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
}
}](https://image.slidesharecdn.com/app-js-bridge-3-150416210553-conversion-gate01/85/Native-Javascript-Bridging-Using-WKWebViews-in-iOS8-12-320.jpg)
Uploaded byPriya Rajagopal
Native-Javascript Bridging Using WKWebViews in iOS8
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.
More Related Content
![第一次用 Vue.js 就愛上 [改]](https://cdn.slidesharecdn.com/ss_thumbnails/vuejs-160518081021-thumbnail.jpg?width=640&height=640&fit=bounds)
Native-Javascript Bridging Using WKWebViews in iOS8
- 1. www.priyaontech.com Native-JS Bridging Using WKWebViews PriyaRajagopal @rajagp
- 2. www.priyaontech.com WebKit • Rendering/Layout Enginefor 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.
- 5. www.priyaontech.com Modern WebKit • UnifiedWebKit 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 • SimplifiedNative <->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 // SetupWKUserContentController 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 // Adda 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.
- 14.