12

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!

hreimer
  • 785
  • 8
  • 31

2 Answers2

9

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" />
flavordaaave
  • 644
  • 9
  • 21
  • For us, following this approach under iOS9 results in a blank screen. Any ideas? –  Aug 24 '16 at 08:20
  • Great, worked also for me. Do you know if using the localhost plugin reduces significantly the performance gains provided by WKWebview? – don Nov 27 '16 at 23:57
  • 2
    ionic plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugins.git#master:local-webserver :: is not working , Error: Failed to fetch plugin https://git-wip-us.apache.org/repos/asf/cordova-plugins.git via git. Either there is a connection problems, or plugin spec is incorrect: Cannot find plugin.xml for plugin "local-webserver". Please try adding it again. – raju Mar 24 '17 at 03:12
1

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.

TWilly
  • 4,863
  • 3
  • 43
  • 73
  • thanks for taking the time to suggest some links - have you had success integrating Crosswalk for iOS in an Ionic project? on their website http://ionicframework.com/docs/cli/browsers.html it states they currently support alternate browsers in Android only.. about Telerik: it requires cordova 3.x instead of 4.x, which brings a whole bunch of other problems to my project and I don't even support iOS 8, so there doesn't seem to be a sensible alternative yet - I also hope after yesterday's WWDC the support for WKWebView (by cordova) will increase.. – hreimer Jun 14 '16 at 07:50
  • I found this thread that indicates that there won't be a cordova plugin supporting crosswalk for iOS since it doesn't have real advantages over the current WKWebView: http://stackoverflow.com/questions/33792527/cordova-crosswalk-ios-still-using-uiwebview – hreimer Jun 14 '16 at 08:07