Ionic WKWebView.md

WKWebView support for Cordova just landed, and we'd love your help testing how it works with Ionic 1.2.

Getting Started

Make sure you have Cordova 5.4.1, if not do npm install -g cordova

Make sure you have ios-deploy 1.8, if not do npm install -g ios-deploy

Start a new Ionic project:

ionic start tabs && cd tabs
rm -r platforms/ios

Then edit your config.xml to this:

<?xml version='1.0' encoding='utf-8'?>
<widget id="com.ionicframework.tabs384918" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <name>Hello Cordova</name>
    <description>
        An Ionic Framework and Cordova project.
    </description>
    <author email="[email protected]" href="http://example.com/">
      Your Name Here
    </author>
    <content src="http://localhost:8080" />
    <plugin name="cordova-plugin-whitelist" spec="1" />
    <access origin="*" />
    <allow-navigation href="gap://ready" />
    <allow-navigation href="http://localhost:*" />
    <preference name="webviewbounce" value="false" />
    <preference name="UIWebViewBounce" value="false" />
    <preference name="DisallowOverscroll" value="true" />
    <preference name="android-minSdkVersion" value="16" />
    <preference name="BackupWebStorage" value="none" />
    <feature name="StatusBar">
        <param name="ios-package" onload="true" value="CDVStatusBar" />
    </feature>
    <preference name="AlternateContentSrc" value="index.html" />
</widget>

The two <allow-navigation /> is necessary for the whitelist plugin. <content src="http://localhost:8080" /> is for the local-webserver plugin, to get around WKWebView enforcing CORS on file://, which was breaking angular template loading.

For some reason (could be an Ionic CLI issue), adding the platform doesn't work unless your name is ‘Hello Cordova’ in config.xml. We are looking into that as a possible bug.

Once you've edited config.xml, run:

ionic platform add [email protected]
ionic plugin add cordova-plugin-wkwebview-engine
ionic plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugins.git#master:local-webserver
(this clobbers the localhost:8080 we put in config.xml, with localhost:* rule in allow-navigation)

ionic run ios
ionic run ios

For some reason ionic run had to be executed twice, it could be a Cordova or Ionic CLI issue and we are looking into it.

Once your app is running, let us know what you think about Ionic and WKWebView support in Cordova. Did it work for you? Is it awesome (or not?). We have an open issue for all feedback and would love your input: ionic-team/ionic-framework#4749