ionic 5 fails with white screen on ios

3
votes

my app runs just fine in browser. However, on ios using Xcode or on device it shows splash screen and then shows a white screen.

the logs in Xcode does not show any errors as such. Below is the reference

2020-06-06 23:01:29.214619-0700 Sales Bot[520:48223] Apache Cordova native platform version 6.0.0 is starting.
2020-06-06 23:01:29.214718-0700 Sales Bot[520:48223] Multi-tasking -> Device: YES, App: YES
2020-06-06 23:01:29.459458-0700 Sales Bot[520:48223] WF: === Starting WebFilter logging for process Sales Bot
2020-06-06 23:01:29.459508-0700 Sales Bot[520:48223] WF: _userSettingsForUser mobile: {
    filterBlacklist =     (
    );
    filterWhitelist =     (
    );
    restrictWeb = 1;
    useContentFilter = 0;
    useContentFilterOverrides = 0;
    whitelistEnabled = 0;
}
2020-06-06 23:01:29.459546-0700 Sales Bot[520:48223] WF: _WebFilterIsActive returning: NO
2020-06-06 23:01:29.471528-0700 Sales Bot[520:48223] The preference key "MediaPlaybackAllowsAirPlay" is not defined and will default to "TRUE"
2020-06-06 23:01:29.474877-0700 Sales Bot[520:48223] WF: _userSettingsForUser mobile: {
    filterBlacklist =     (
    );
    filterWhitelist =     (
    );
    restrictWeb = 1;
    useContentFilter = 0;
    useContentFilterOverrides = 0;
    whitelistEnabled = 0;
}
2020-06-06 23:01:29.474925-0700 Sales Bot[520:48223] WF: _WebFilterIsActive returning: NO
2020-06-06 23:01:29.475974-0700 Sales Bot[520:48223] The preference key "AllowBackForwardNavigationGestures" is not defined and will default to "FALSE"
2020-06-06 23:01:29.476031-0700 Sales Bot[520:48223] The preference key "Allow3DTouchLinkPreview" is not defined and will default to "TRUE"
2020-06-06 23:01:29.476072-0700 Sales Bot[520:48223] CDVWebViewEngine will reload WKWebView if required on resume
2020-06-06 23:01:29.476112-0700 Sales Bot[520:48223] Using WKWebView
2020-06-06 23:01:29.476344-0700 Sales Bot[520:48223] [CDVTimer][console] 0.048995ms
2020-06-06 23:01:29.476451-0700 Sales Bot[520:48223] [CDVTimer][handleopenurl] 0.046968ms
2020-06-06 23:01:29.477854-0700 Sales Bot[520:48223] Unlimited access to network resources
2020-06-06 23:01:29.477930-0700 Sales Bot[520:48223] [CDVTimer][intentandnavigationfilter] 1.428962ms
2020-06-06 23:01:29.478012-0700 Sales Bot[520:48223] [CDVTimer][gesturehandler] 0.043035ms
2020-06-06 23:01:29.479038-0700 Sales Bot[520:48223] [CDVTimer][statusbar] 0.966907ms
2020-06-06 23:01:29.479963-0700 Sales Bot[520:48223] [CDVTimer][splashscreen] 0.867009ms
2020-06-06 23:01:29.480120-0700 Sales Bot[520:48223] The preference key "KeyboardResize" is not defined and will default to "TRUE"
2020-06-06 23:01:29.480162-0700 Sales Bot[520:48223] CDVIonicKeyboard: resize mode 1
2020-06-06 23:01:29.480197-0700 Sales Bot[520:48223] The preference key "HideKeyboardFormAccessoryBar" is not defined and will default to "TRUE"
2020-06-06 23:01:29.480704-0700 Sales Bot[520:48223] The preference key "KeyboardAppearanceDark" is not defined and will default to "FALSE"
2020-06-06 23:01:29.480853-0700 Sales Bot[520:48223] [CDVTimer][cdvionickeyboard] 0.824928ms
2020-06-06 23:01:29.480897-0700 Sales Bot[520:48223] [CDVTimer][TotalPluginStartup] 4.652023ms
2020-06-06 23:01:29.595738-0700 Sales Bot[520:48223] The preference key "AutoHideSplashScreen" is not defined and will default to "TRUE"

i have already checked wkwebview article at https://ionicframework.com/docs/v3/wkwebview/ and have tried the steps to resolve white screen issue but no luck.

the config.xml looks like below

<?xml version='1.0' encoding='utf-8'?>
<widget id="xxxx" version="3.0.7" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <name>Sales Bot</name>
    <description>xxxxx</description>
    <author email="xxxx" href="">xx</author>
    <content src="index.html" />
    <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:*" />
    <allow-navigation href="*" />
    <allow-navigation href="http://localhost:8080/*" />
    <preference name="ScrollEnabled" value="false" />
    <preference name="android-minSdkVersion" value="19" />
    <preference name="BackupWebStorage" value="none" />
    <preference name="SplashMaintainAspectRatio" value="true" />
    <preference name="FadeSplashScreenDuration" value="300" />
    <preference name="SplashShowOnlyFirstTime" value="false" />
    <preference name="SplashScreen" value="/assets/logo.png" />
    <preference name="SplashScreenDelay" value="3000" />
    <preference name="WKWebViewOnly" value="true" />
    <feature name="CDVWKWebViewEngine">
        <param name="ios-package" value="CDVWKWebViewEngine" />
    </feature>
    <preference name="CordovaWebViewEngine" value="CDVWKWebViewEngine" />
    <platform name="android">
        <edit-config file="app/src/main/AndroidManifest.xml" mode="merge" target="/manifest/application" xmlns:android="http://schemas.android.com/apk/res/android">
            <application android:networkSecurityConfig="@xml/network_security_config" />
        </edit-config>
        <resource-file src="resources/android/xml/network_security_config.xml" target="app/src/main/res/xml/network_security_config.xml" />
        <allow-intent href="market:*" />
        <icon density="ldpi" src="resources/android/icon/drawable-ldpi-icon.png" />
        <icon density="mdpi" src="resources/android/icon/drawable-mdpi-icon.png" />
        <icon density="hdpi" src="resources/android/icon/drawable-hdpi-icon.png" />
        <icon density="xhdpi" src="resources/android/icon/drawable-xhdpi-icon.png" />
        <icon density="xxhdpi" src="resources/android/icon/drawable-xxhdpi-icon.png" />
        <icon density="xxxhdpi" src="resources/android/icon/drawable-xxxhdpi-icon.png" />
        <splash density="land-ldpi" src="resources/android/splash/drawable-land-ldpi-screen.png" />
        <splash density="land-mdpi" src="resources/android/splash/drawable-land-mdpi-screen.png" />
        <splash density="land-hdpi" src="resources/android/splash/drawable-land-hdpi-screen.png" />
        <splash density="land-xhdpi" src="resources/android/splash/drawable-land-xhdpi-screen.png" />
        <splash density="land-xxhdpi" src="resources/android/splash/drawable-land-xxhdpi-screen.png" />
        <splash density="land-xxxhdpi" src="resources/android/splash/drawable-land-xxxhdpi-screen.png" />
        <splash density="port-ldpi" src="resources/android/splash/drawable-port-ldpi-screen.png" />
        <splash density="port-mdpi" src="resources/android/splash/drawable-port-mdpi-screen.png" />
        <splash density="port-hdpi" src="resources/android/splash/drawable-port-hdpi-screen.png" />
        <splash density="port-xhdpi" src="resources/android/splash/drawable-port-xhdpi-screen.png" />
        <splash density="port-xxhdpi" src="resources/android/splash/drawable-port-xxhdpi-screen.png" />
        <splash density="port-xxxhdpi" src="resources/android/splash/drawable-port-xxxhdpi-screen.png" />
    </platform>
    <platform name="ios">
        <feature name="CDVWKWebViewEngine">
            <param name="ios-package" value="CDVWKWebViewEngine" />
        </feature>
        <preference name="CordovaWebViewEngine" value="CDVWKWebViewEngine" />
        <allow-intent href="itms:*" />
        <allow-intent href="itms-apps:*" />
        <icon height="57" src="resources/ios/icon/icon.png" width="57" />
        <icon height="114" src="resources/ios/icon/[email protected]" width="114" />
        <icon height="29" src="resources/ios/icon/icon-small.png" width="29" />
        <icon height="58" src="resources/ios/icon/[email protected]" width="58" />
        <icon height="87" src="resources/ios/icon/[email protected]" width="87" />
        <icon height="20" src="resources/ios/icon/icon-20.png" width="20" />
        <icon height="40" src="resources/ios/icon/[email protected]" width="40" />
        <icon height="60" src="resources/ios/icon/[email protected]" width="60" />
        <icon height="48" src="resources/ios/icon/[email protected]" width="48" />
        <icon height="55" src="resources/ios/icon/[email protected]" width="55" />
        <icon height="29" src="resources/ios/icon/icon-29.png" width="29" />
        <icon height="58" src="resources/ios/icon/[email protected]" width="58" />
        <icon height="87" src="resources/ios/icon/[email protected]" width="87" />
        <icon height="40" src="resources/ios/icon/icon-40.png" width="40" />
        <icon height="80" src="resources/ios/icon/[email protected]" width="80" />
        <icon height="120" src="resources/ios/icon/[email protected]" width="120" />
        <icon height="88" src="resources/ios/icon/[email protected]" width="88" />
        <icon height="50" src="resources/ios/icon/icon-50.png" width="50" />
        <icon height="100" src="resources/ios/icon/[email protected]" width="100" />
        <icon height="60" src="resources/ios/icon/icon-60.png" width="60" />
        <icon height="120" src="resources/ios/icon/[email protected]" width="120" />
        <icon height="180" src="resources/ios/icon/[email protected]" width="180" />
        <icon height="72" src="resources/ios/icon/icon-72.png" width="72" />
        <icon height="144" src="resources/ios/icon/[email protected]" width="144" />
        <icon height="76" src="resources/ios/icon/icon-76.png" width="76" />
        <icon height="152" src="resources/ios/icon/[email protected]" width="152" />
        <icon height="167" src="resources/ios/icon/[email protected]" width="167" />
        <icon height="172" src="resources/ios/icon/[email protected]" width="172" />
        <icon height="196" src="resources/ios/icon/[email protected]" width="196" />
        <icon height="1024" src="resources/ios/icon/icon-1024.png" width="1024" />
        <splash height="480" src="resources/ios/splash/Default~iphone.png" width="320" />
        <splash height="960" src="resources/ios/splash/Default@2x~iphone.png" width="640" />
        <splash height="1024" src="resources/ios/splash/Default-Portrait~ipad.png" width="768" />
        <splash height="768" src="resources/ios/splash/Default-Landscape~ipad.png" width="1024" />
        <splash height="1125" src="resources/ios/splash/Default-Landscape-2436h.png" width="2436" />
        <splash height="1242" src="resources/ios/splash/Default-Landscape-736h.png" width="2208" />
        <splash height="2048" src="resources/ios/splash/Default-Portrait@2x~ipad.png" width="1536" />
        <splash height="1536" src="resources/ios/splash/Default-Landscape@2x~ipad.png" width="2048" />
        <splash height="2732" src="resources/ios/splash/Default-Portrait@~ipadpro.png" width="2048" />
        <splash height="2048" src="resources/ios/splash/Default-Landscape@~ipadpro.png" width="2732" />
        <splash height="1136" src="resources/ios/splash/Default-568h@2x~iphone.png" width="640" />
        <splash height="1334" src="resources/ios/splash/Default-667h.png" width="750" />
        <splash height="2208" src="resources/ios/splash/Default-736h.png" width="1242" />
        <splash height="2436" src="resources/ios/splash/Default-2436h.png" width="1125" />
        <splash height="2732" src="resources/ios/splash/Default@2x~universal~anyany.png" width="2732" />
        <icon height="216" src="resources/ios/icon/[email protected]" width="216" />
        <splash height="2688" src="resources/ios/splash/Default-2688h~iphone.png" width="1242" />
        <splash height="1242" src="resources/ios/splash/Default-Landscape-2688h~iphone.png" width="2688" />
        <splash height="1792" src="resources/ios/splash/Default-1792h~iphone.png" width="828" />
        <splash height="828" src="resources/ios/splash/Default-Landscape-1792h~iphone.png" width="1792" />
    </platform>
    <plugin name="cordova-plugin-whitelist" spec="~1.3.3" />
    <plugin name="cordova-plugin-statusbar" spec="~2.4.2" />
    <plugin name="cordova-plugin-device" spec="~2.0.2" />
    <plugin name="cordova-plugin-splashscreen" spec="~5.0.2" />
    <plugin name="cordova-plugin-ionic-keyboard" spec="^2.0.5" />
</widget>
4
iosxcodecordovaionic-frameworkionic5

4 Answers

3
votes

in my case the webview plugin was missing. it was earlier their but while trying to fix things for ios i ended up removing it. So i thought to check again for android and it was broken there too.

So, the only suspect i found was webview plugin. added and it worked on android. then same worked as is on ios too.

0
votes

A couple months ago I had the same issue.

In Xcode, try opening the workspace file (.xcworkspace) instead of the .xcodeproj I'm not sure if this might work for you, but it worked for me.

0
votes

I had the same issue but my solution was different. I downgraded cordova-plugin-splashscreen to 5.0.3 from 6.0.0 and it's ok now.

0
votes

Step 1 : In Xcode, try opening the workspace file (.xcworkspace) instead of the .xcodeproj.
This issue is cost by the by the splash screen setup, on will can change that in the config.xml file in two places but in your project file.
Step 2: on your project locate config.xml file “AppName/platforms/ios/AppName/config.xml”
Step 3: on your project locate config file “AppName/config.xml”

This are what to change:
From:

<preference name="AutoHideSplashScreen" value="false" />

To:

<preference name="AutoHideSplashScreen" value=“true” />

https://ionic.io/docs/premier-plugins/splashscreen