WKWebView javascript quirks

WKWebView is the more performant webview control introduced by Apple for iOS and OSX apps. You can read more about this in my previous post.  But as the post mentions there are many features missing that are present in the UIWebView control. One such quirk is related to how WKWebView handles javascript actions that result in an alert, prompt (or) request to open a new url in a new window(tab). If we dont correctly handle, all of these clicks will result in no-op in WKWebView.

  • WKWebView does not open any <a> links that have target=”_blank”. ( For eg: From inside a WKWebview, if you click on the trailers in http://www.tomcruise.com website , nothing happens).  In desktop browser, if target is “_blank”, a new tab is opened. In the in-app browser, we usually want the page to load on top of the current one. In order to achieve that in WKWebView, the following steps need to be followed.
    • Make your view controller that handles the webView callbacks to implement WKUIDelegate
    • In the view controller add the following code. This code verifies if the navigationAction’s target frame is nil(happens when target=”_blank”) and calls loadRequest on the navigationAction.request using current webview. The method ends with returning nil as we did not create a webView and used the existing one instead

  • WKWebView does not display the following Javascript prompts that are requested by web page.
    • Javascript prompt that shows a message that user can dismiss by a button pressWKWebView does not render any of the following prompts that are initiated by javascript code inside the WKWebView
    • Javascript prompt with OK and Cancel buttons, asking for user to make a choice of further action
    • Javascript prompt that asks for text input from user with an OK and Cancel buttons

To ensure all these three different javascript prompts show up, ensure that you have implemented the following three WKUIDelegate methods. The delegate methods give us access to the completion handler and which type of Javascript prompt to create. We need to create an iOS alert in the delegate method and render it modally for users to interact with.

I dont know why Apple’s Webkit could not have included a default implementation for these delegate methods with the creation and displaying alert controller

WKWebView javascript quirks

WKWebView – slice of Safari in your app

WKWebView was introduced in WWDC 2014 as an open source alternative to UIWebView for iOS and Mac apps.

WKWebView boasts of many advantages over UIWebView, some of which are included below:

  • WKWebView has very few/no memory leaks as opposed to UIWebView
  • WKWebView boasts Nitro javascript engine, same as used by Safari
  • Each WKWebView tab is opened in a new Process different than the app providing new and different resource pool that is separate from the app.
  • Some studies have shown that for some resource-intensive websites, the CPU usage is much lower
  • WKWebView provides key value observing (KVO) capability for web-related attributes ( change in title of webpage, estimated progress of loading of web page etc). For a detailed list of the WKWebView’s support KVO properties, refer here

Your next question should be, “What is the catch?”.

WKWebView was released without all the features of UIWebView.  Many of these are slowly being addressed over the last year. As of iOS 8.4 ( current greatest released iOS version), some of the cons are:

  • Requests made from WKWebView cannot be customized using NSURLProtocol
  • WKWebView does not have a good story defined around cookie-management ( should be fixed in iOS 9 to be released in October)
  • WKWebView cannot render content from local file unless it resides in /tmp folder.
  • As every WKWebView tab is opened in a new process, it is hard to visualize the memory consumption by WKWebView from Xcode

In my coming posts, I will focus on the gotchas related to WKWebView that I figured out while coding it up.

WKWebView – slice of Safari in your app