rachid / cordova-plugin-ionic-webview

Ionic's Webview

This plugin is an extension of the Apache Cordova WKWebView plugin. It includes enhancements to resolve some of the issues surrounding XHR requests, along with some DOM exception issues.

This plugin only supports iOS 9 and above and will fall back to UIWebView on iOS 8.

The WKWebView plugin is only used by iOS, so ensure the cordova-ios platform is installed. Additionly, the cordova-ios platform version must be 4.0 or greater.

Installation Instructions

Ensure the latest Cordova CLI is installed: (Sudo may be required)

npm install cordova -g

Ensure the ios platform has been added:

ionic cordova platform ls

If the iOS platform is not listed, run the following command:

ionic cordova platform add ios

If the iOS platform is installed but the version is < 4.x, run the following commands:

ionic cordova platform update ios
ionic cordova plugin save           # creates backup of existing plugins
rm -rf ./plugins            # delete plugins directory
ionic cordova prepare               # re-install plugins compatible with cordova-ios 4.x

Install the WKWebViewPlugin:

ionic cordova plugin add cordova-plugin-ionic-webview --save

Note:

If you already had apache/cordova-plugin-wkwebview-engine install make sure that is removed before using this version.

ionic cordova plugin rm cordova-plugin-wkwebview-engine

Build the platform:

ionic cordova prepare

Test the app on an iOS 9 or 10 device:

ionic cordova run ios

Required Permissions

WKWebView may not fully launch (the deviceready event may not fire) unless if the following is included in config.xml:

config.xml

<allow-navigation href="http://localhost:8080/*"/>
<feature name="CDVWKWebViewEngine">
  <param name="ios-package" value="CDVWKWebViewEngine" />
</feature>

<preference name="CordovaWebViewEngine" value="CDVWKWebViewEngine" />

Webserver port

You can set the port that the built-in local webserver will listen on (default is 8080) using the "WKPort" preference.

If you change the port, be sure to also update your <allow-navigation> href attribute to match, as mentioned above in the Required Permissions section.

config.xml

<preference name="WKPort" value="12345" />
<allow-navigation href="http://localhost:12345/*"/>

Application Transport Security (ATS) in iOS 9

The next released version of the cordova-cli 5.4.0 will support automatic conversion of the <access> tags in config.xml to Application Transport Security ATS directives. Upgrade to the version 5.4.0 to use this new functionality.

Apple Issues

The AllowInlineMediaPlayback preference will not work because of this Apple bug. This bug has been fixed in iOS 10.

Limitations

There are several known issues with the official Cordova WKWebView plugin. The Ionic team thinks we have resolved several of the major issues. Please let us know if something isn't working as expected.