Using the iOS 8 WKWebView with Telerik AppBuilder

Much ado has been made about the inclusion of Apple’s new web view (WKWebView) in iOS 8. PhoneGap/Cordova developers especially were keen to take advantage of this new high-performing web view in their apps. In this article we’ll discuss why WKWebView is important and how you can use it today with Telerik AppBuilder.

What is the WKWebView?

When you develop a hybrid mobile app with PhoneGap/Cordova, your app runs within the mobile platform’s web view (whether it be iOS, Android, or Windows Phone). Historically on iOS, this meant invoking the UIWebView which, while quite powerful, lacked certain performance features such as JavaScriptCore (a.k.a. Nitro) for extremely fast JavaScript compilation and execution. With iOS 8, however, Apple introduced a brand new web view called WKWebView (short for “WebKit WebView”).

In the context of hybrid apps, the biggest takeaway regarding WKWebView is that it includes Nitro, which brings us to…

Why should I care about WKWebView?

WKWebView brings an amazing performance boost to the execution of JavaScript in hybrid mobile apps. Using SunSpider tests with Chrome (which uses UIWebView) and Safari (which uses WKWebView) on iOS 8, we are seeing a 300% performance gain (bringing WKWebView to within striking distance of even a desktop browser!).

sunspider wkwebview

The other advantage of leveraging WKWebView is a decrease in memory and CPU usage on the device. Our tests have shown a 50% to 80% decrease in both memory consumption and CPU usage. Your individual results may vary of course, but this looks very promising!

For a more detailed analysis of the WKWebView and what it means for hybrid developers, check out TJ VanToll’s post on the Telerik Developer Network.

How do I use WKWebView in my app?

Leveraging WKWebView in Telerik AppBuilder couldn’t be much simpler thanks to the Verified Plugins Marketplace. If you haven’t heard of the Verified Plugins Marketplace until now, it’s a curated set of high value Cordova/PhoneGap plugins that have been thoroughly tested, documented, and verified to work with AppBuilder. And, yes, the WKWebView plugin is available now in the marketplace!

Tip: Make sure you are targeting Cordova 3.7+ in AppBuilder, this will make sure your build uses the latest iOS SDK.

To use the WKWebView plugin in your AppBuilder app you have two choices:

  1. On the plugin detail page, click the Try Plugin in AppBuilder button. This will clone our WKWebView demo app in AppBuilder for you, so you can get up and running immediately.

    try plugin in appbuilder

  2. If you have an existing AppBuilder app, the easiest way to include a Cordova plugin is by using our Package Manager:

    • In the Project Navigator, right click your project and choose Manage Packages.
    • Choose the Plugins Marketplace tab.
    • Search for WKWebView and click Install.

    appbuilder package manager

Alternatively, you may use the AppBuilder CLI or Cordova CLI by issuing the following commands:

  • AppBuilder CLI: appbuilder plugin add "WKWebView Polyfill" --release
  • Cordova CLI: cordova plugin add https://github.com/Telerik-Verified-Plugins/WKWebView

Conclusion

Hopefully once you see the potential benefits of using WKWebView, you’ll be eager to test it on your app. Try out the WKWebView Cordova plugin on the Verified Plugins Marketplace and notify us of any issues. Good luck!

Header image courtesy of Dan DeChiaro

Comments

  • Pingback: Dew Drop – January 30, 2015 (#1944) | Morning Dew()

  • Hi Rob! Excited (and not surprised!) to see Telerik take the lead in getting this webview out to the world. In the plugin’s documentation, it mentions that WKWebView uses HTTP instead of file:// protocol, so that means 3rd party API calls won’t work, correct? We can’t assume that vendors will update their server settings to allow this. Any thoughts on Apple changing it back to file://? Thanks!

    • Hey Matt – Good question. You are correct in that we can’t use the file:// protocol because of a bug in iOS 8. The one big thing you need to worry about is that your remote servers support CORS – which didn’t apply in UIWebView because it supported file://. As far as Apple making a change, we still haven’t seen it fixed, even in the 8.2 beta, so we aren’t holding our breath!

      • Oh that’s right, I remember seeing that bug now. OK, thanks!

  • Pingback: Dew Drop – February 2, 2015 (#1945) | Morning Dew()

  • Pingback: The State of Hybrid Mobile Development - Telerik Developer NetworkTelerik Developer Network()