Ios – White blank screen issue with cordova ios with cordova-plugin-ionic-webview or cordova-plugin-wkwebview-engine plugins

cordovaionic3ioswkwebview

There will an issue with UIWebview in ios. Apple is going to reject app using this. So we decided to use WKWebview for our cordova ios app. I installed cordova-plugin-wkwebview-engine and added <preference name="WKWebViewOnly" value="true" /> in config.xml file.
The issue is after the splash screen Its showing white blank screen. 

    <?xml version='1.0' encoding='utf-8'?>
<widget id="io.cordova.hellocordova" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <name>HelloCordova</name>
    <description>
        A sample Apache Cordova application that responds to the deviceready event.
    </description>
    <author email="dev@cordova.apache.org" href="http://cordova.io">
        Apache Cordova Team
    </author>
    <content src="index.html" />
    <plugin name="cordova-plugin-whitelist" spec="1" />
    <access origin="*" />
    <allow-intent href="http://*/*" />
    <allow-intent href="https://*/*" />
    <allow-intent href="tel:*" />
    <allow-intent href="sms:*" />
    <allow-intent href="mailto:*" />
    <allow-intent href="geo:*" />
    <platform name="android">
        <allow-intent href="market:*" />
    </platform>
    <platform name="ios">
        <allow-intent href="itms:*" />
        <allow-intent href="itms-apps:*" />
    </platform>
    <plugin name="cordova-plugin-ionic-webview" spec="^4.1.3" />
    <preference name="WKWebViewOnly" value="true" />
    <engine name="ios" spec="~5.1.1" />
    <plugin name="cordova-plugin-background-mode" spec="^0.7.3" />
    <plugin name="cordova-plugin-badge" spec="^0.8.8" />
    <plugin name="cordova-plugin-camera" spec="^4.1.0" />
    <plugin name="cordova-plugin-device" spec="^2.0.3" />
    <plugin name="cordova-plugin-geolocation" spec="^4.0.2" />
    <plugin name="cordova-plugin-splashscreen" spec="^5.0.3" />
    <plugin name="cordova-plugin-x-toast" spec="^2.7.2" />
</widget>

Best Answer

remember to add this plugins:

<plugin name="cordova-plugin-wkwebview-engine"  source="npm" /> 
<plugin name="cordova-plugin-wkwebview-file-xhr"  source="npm" />

and add this

<preference name="WKWebViewOnly" value="true" />
<feature name="CDVWKWebViewEngine">
    <param name="ios-package" value="CDVWKWebViewEngine" />
</feature>
<preference name="CordovaWebViewEngine" value="CDVWKWebViewEngine" />
<preference name="AllowBackForwardNavigationGestures" value="true" />
<preference name="Allow3DTouchLinkPreview" value="false" />

compile with cordova-ios@5.1.1

To build it with cordova-ios@6.1.0+

  • remove splash plugin (now is integrated)
  • upgrade the inappbrowser plugin to v4.0.0
  • remove all wkwebview related plugins
  • add scheme and host to config.xml:
    <preference name="scheme" value="app" />
    <preference name="hostname" value="localhost"  />
Related Topic