even basic Ionic project with Cordova WKWebview Engine plugin produces white screen

Question

My problem: The ionic app I'm developing is horribly slow, after finding out UIWebView is the culprit I'm looking for ways to speed it up, with WKWebView being the most promising solution.

What my project looks like: When setting up a sample ionic project (http://ccoenraets.github.io/ionic-tutorial/install-ionic.html for example) with the current Cordova 4.1.0 CLI (i'm using Ionic 1.2.4) UIWebView is used as default. However, since Cordova 4, the new and faster WKWebView is supported out-of-the-box and can be forced, at least in iOS 9 (cordova 4 supports WKWebView).

The plugin I used & configured: via cordova plugin add cordova-plugin-wkwebview-engine the support is added for the iOS platform (9.3 right now). When this plugin is added and properly configured in the config.xml with

<feature name="CDVWKWebViewEngine"> <param name="ios-package" value="CDVWKWebViewEngine" /> </feature> <preference name="CordovaWebViewEngine" value="CDVWKWebViewEngine" />

What I tried so far: In the terminal ionic build ios, then build succeeds, and when installing the app via XCode 7.3 on OS X El Capitan 10.11.3 in the console log the Using WKWebView message is printed but then, right after the splashscreen, the app container fades into a white screen of death. As soon as I remove that plugin, UIWebView is used and the app works as expected.

Alternative: replacing the original plugin wkwebview-engine-localhost with one with integrated localhost, works. As I understood, the WKWebview should be supported by cordova and ionic right out of the box, without having to rely on some "labs plugin" with an integrated server, which was developed to support iOS 8 which I don't need. I understand that WKWebView has quite some limitations compared to the old UIWebView, especially when it comes to handling file:// statements known issues, but there for sure must be someone out there who got Ionic + Cordova WKWebView working without all the hassle I had, right? There must be better ways to achieving a simple speed improvement for the webview.

I tried probably every solution, config, plugin combination, cordova cli version downgrade (minimum being 4.0.0 for WKWebView support), clearing caches and resetting and restarting of my device, new install and readding of platforms and update of cordova, npm, various plugins, but all of them either didn't help at all except for the apache labs plugin above or seemed like a huge mess that didn't change anything.

When remote debugging the ios app on the device via my local Safari, I can see in the elements tree, that the body tag stays either empty, or a simple "ng-view" placeholder for an angular element is shown. Am I correct that there must be a problem with the retrieval of files/angular scripts through the way cordova via WKWwebView handles it?

Note: the app itself works fine, either with ionic serve or ionic emulate ios, only when deploying to a real device over XCode (since ionic run ios doesn't work, but that's a different story) the white screen appears.

Any help is very much appreciated, as it seems to me I have to either use the localhost+wkwebview plugin or let the users suffer from poor speed.

Thanks a lot!

Answer 1

I got an ionic2 project working with WKWebview. I think the steps I took are working for ionic1 as well:

1) Install WKWebview Plugin:

ionic plugin add cordova-plugin-wkwebview-engine

2) Install local webserver Plugin:

ionic plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugins.git#master:local-webserver

3) Add/change following in your config.xml:

...

<content src="http://localhost:8080" />

...

<allow-navigation href="gap://ready" />
<allow-navigation href="http://localhost:*" />

...

<feature name="CDVWKWebViewEngine">
    <param name="ios-package" value="CDVWKWebViewEngine" />
</feature>
<preference name="CordovaWebViewEngine" value="CDVWKWebViewEngine" />

Answer 2

I'm looking into using CrossWalk for IOS which has an implementation of WkWebView working.

https://crosswalk-project.org/documentation/ios.html

The project is supported by Intel so there is solid support behind it.

Another option would be to try and install the following plugin developed by Telerik that swaps in a WKWebView.

https://github.com/Telerik-Verified-Plugins/WKWebView

Cordova is also moving to supporting WKWebView with a plugin as well. The support for WKWebView is terrible. It's riddled with bugs since it came out in iOS7. It's slowly getting fixed each ios release.

Here is to hoping iOS 10 makes some improvements.