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

9
votes

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="[email protected]" 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>
5
ioscordovaionic3wkwebview
Did you solve this? I am having the same issue. – gregwinn
how to solve this issue? I have added the plugins but still their issue. how can I get this solve? I am using PhoneGap. – Suhas Arvind Patil
any news ? still have problem with that, I tried everything in this page – Kou Peto

5 Answers

9
votes

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 [email protected]

To build it with [email protected]+

  • 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"  />
1
votes

Same problem here. I had to reinstall ios platform to make it work (to version 5.1.1)

0
votes

In my experience it is not actually a white screen but a blank view with a white background, the cordova app is not rendering properly and if you scroll you can see all the div views below.

This appears to be an issue with cordova apps on the new iOS 13.4 release, regardless of using UIWebview or WKWebview.

0
votes

According to cordova documentation : https://github.com/apache/cordova-plugin-wkwebview-engine/blob/master/README.md

Correct way to do it: https://ionicframework.com/blog/understanding-itms-90809-uiwebview-api-deprecation/?utm_campaign=enterprise&utm_source=hs_email&utm_medium=email&utm_content=85128961&_hsenc=p2ANqtz--vsf3kcg7MssMWwjv2_GpHmVbzN23_5fXDfKT0E6OileYraLWs9btGPqWUcq5mzTKCtKwXGqO35V3SnInjypj4uqSBRg&_hsmi=85128961

These permissions have to be added

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

So check they are added plus as the documentation say: "In iOS 9, Apple has fixed the issuepresent through iOS 8 where you cannot load locale files using file://, and must resort to using a local webserver. However, you are still not able to use XHR from the file:// protocol without CORS enabled on your server."

So if your testing on a version 8 then there is problem but i think as i saw the implementation is still not full in your config.xml so update it with the feature and preference.

0
votes

Go to the tsconfig.json and make sure in compilerOptions the target is set to es5. I tried all and only this works for me