Using WKWebview in iOS9 to Boost Ionic / Cordova Performance

Why?

The iOS Native Webview sucks. There is a better way.

WKWebview is an alternative webview for iOS with drastically better performance. If you don't need it I wouldn't recommend trying to use it in your project as of now.

But if your app needs a performance boost follow all the steps I have laid out here and hopefully you'll avoid all the annoying pitfalls I ran into.

Update Cordova

The latest WKWebview has issues with older versions of Cordova. So make sure Cordova is up to date.

npm update -g cordova  

If you're getting the error below and even if you're not you should update your installation of Cordova. Even if you think it's already up to date. Just give it a try it takes two seconds.

Failed to install 'com.telerik.plugins.wkwebview':Error: 404 Not Found: cordova-plugin-webserver  

Solution reference

Install WKWebview

Install the WKWebview plugin.

cordova plugin add cordova-plugin-wkwebview --variable WKWEBVIEW_SERVER_PORT=12344  

Reset Platform

Remove then add your iOS platform to avoid plugin errors.

cordova platform rm ios  
cordova platform add ios  

This is the error I received. Before I reset the iOS platform.

ERROR: Plugin 'Device' not found, or is not a CDVPlugin. Check your plugin mapping in config.xml.  

I found the platform add/remove solution from this Stack Overflow thread.

If you don't have too much tied up in your Xcode project (which I didn't), the easiest way to resolve this is to do: cordova platform remove ios and then... cordova platform add ios Whatever it is that gets muddled up is resolved by doing that. You don't need to reinstall the plugins, they get installed when you re-add the platform. - Chris Rae

Bad Build Settings

I was so close to the finish line. Then while trying to submit my app through Xcode I received the error below.

Linker command failed with exit code 1  

Luckily I found a useful post on the Ionic Forum. All you have to do is change one setting in Xcode and the error will be suppressed.

Select your main project file then select the "Build Settings" tab in the main view.

Make sure you have "All" and "Combined" selected in the sub-header.

If you don't you won't be able to see the "Enable Bitcode" parameter under "Build Settings" this should currently be set to "Yes" we want to set it to "No".

alt

File Path Caveats

It's not all peaches and cream.

The only thing that broke after successfully adding the WKWebview plugin was that my ngCordova call $cordova.newMedia('/audio/fx.mp3') stopped working. I discovered that if I changed it to $cordova.newMedia('http://localhost:12344/audio/fx.mp3') it worked as normal.

I haven't done any research into why this is yet. But my assumption is that you have to prefix your file paths with "http://localhost:12344" anytime you're referencing a file from a native context. Which means anytime you put a file path into a Cordova Plugin.

Why localhost? Well WKWebview creates a local server in your app that it uses to load the alternate webview and you guessed it! This server runs on the address "http://localhost:12344".

You won't have to change file paths that are referenced from local HTML, JS, or CSS. So you can leave <img src="img/cats.jpg"> as is after adding WKWebview.

Closing

Message me with solutions not questions.

If you followed all these steps and still had problems that you were able to fix I would love to hear about it. If you provide reference links and some detail I'll add your solution to this article (with accreditation of course).

A set of UI components for React Native.
Get Carbon Native!