ionic 5 fails with white screen on ios

Issue

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/icon@2x.png" width"114" />
        <icon height"29" src"resources/ios/icon/icon-small.png" width"29" />
        <icon height"58" src"resources/ios/icon/icon-small@2x.png" width"58" />
        <icon height"87" src"resources/ios/icon/icon-small@3x.png" width"87" />
        <icon height"20" src"resources/ios/icon/icon-20.png" width"20" />
        <icon height"40" src"resources/ios/icon/icon-20@2x.png" width"40" />
        <icon height"60" src"resources/ios/icon/icon-20@3x.png" width"60" />
        <icon height"48" src"resources/ios/icon/icon-24@2x.png" width"48" />
        <icon height"55" src"resources/ios/icon/icon-27.5@2x.png" width"55" />
        <icon height"29" src"resources/ios/icon/icon-29.png" width"29" />
        <icon height"58" src"resources/ios/icon/icon-29@2x.png" width"58" />
        <icon height"87" src"resources/ios/icon/icon-29@3x.png" width"87" />
        <icon height"40" src"resources/ios/icon/icon-40.png" width"40" />
        <icon height"80" src"resources/ios/icon/icon-40@2x.png" width"80" />
        <icon height"120" src"resources/ios/icon/icon-40@3x.png" width"120" />
        <icon height"88" src"resources/ios/icon/icon-44@2x.png" width"88" />
        <icon height"50" src"resources/ios/icon/icon-50.png" width"50" />
        <icon height"100" src"resources/ios/icon/icon-50@2x.png" width"100" />
        <icon height"60" src"resources/ios/icon/icon-60.png" width"60" />
        <icon height"120" src"resources/ios/icon/icon-60@2x.png" width"120" />
        <icon height"180" src"resources/ios/icon/icon-60@3x.png" width"180" />
        <icon height"72" src"resources/ios/icon/icon-72.png" width"72" />
        <icon height"144" src"resources/ios/icon/icon-72@2x.png" width"144" />
        <icon height"76" src"resources/ios/icon/icon-76.png" width"76" />
        <icon height"152" src"resources/ios/icon/icon-76@2x.png" width"152" />
        <icon height"167" src"resources/ios/icon/icon-83.5@2x.png" width"167" />
        <icon height"172" src"resources/ios/icon/icon-86@2x.png" width"172" />
        <icon height"196" src"resources/ios/icon/icon-98@2x.png" 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/icon-108@2x.png" 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>

Solution

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.

Answered By – Moblize IT

Leave a Comment