White splashscreen for iOS after switching to Cordova iOS 6.1.0

Mehditerranee commented 4 years ago

Hi,

My app was working fine on Cordova iOS 5 with UIWebView. But I switched to WKWebView on Cordova iOS 6.1.0 and now I get is a white splashscreen.

FYI, I :

updated cordova-ios from 5.0.1 to 6.1.0
updated my Cordova version from 9.0.0 to Cordova 10.0.0
updated cordova-plugin-splashscreen from 5.0.0 to 6.0.0

added scheme and host to config.xml:

<preference name="scheme" value="app" />
<preference name="hostname" value="localhost" />

Then, i tried to launch my app on iOS emulator to test it.

Expected behavior

The splashscreen is correctly displayed and disappears after a few seconds.

Current behavior

The current behavior is a white splashscreen that disappears well after a few seconds.

Explorations

What I understood is that the Splashscreen is directly integrated and supported into cordova-ios 6.1.0 so there is no need the plugin cordova-plugin-splashscreen anymore for iOS but it is still required for Android.

My app should work on both Android and iOS.

That is why i didn't remove cordova-plugin-splashscreen and I let the config.xml with the same structure and parameters.

When I launched my app on iOS simulator, I retrieved in the logs this warning : Could not load the "LaunchStoryboard" image referenced from a nib in the bundle with identifier "com.mehdigallois.geocars"

I don't know why the expected splashscreen name is 'LaunchStoryboard', in my config.xml there is not this name or this reference

I tested my app with an Android device, all is ok. I tested with several iOS devices, and the issue is still present.

My assumption

I noted there are two mechanisms for showing launch images. The first one is "Legacy" method where images are determined by width and height. The second one is "Storyboard" method where images are determined by scale, idiom, and size traits.

I think since the splashscreen is supported by cordova-ios 6.1.0, only the "Storyboard" method is handle. In my case, I use the "Legacy" method.

What I will try to do

I will try to use the "Storyboard" method instead of "Legacy" method and check the behavior.

Thanks for your help.

Mehditerranee commented 4 years ago

After some tests, and after executing what I suggested, I solved my issue partly.

Indeed, I use the "Storyboard" method instead of "Legacy" method and I checked the behavior.

More precisely:

I commented out all lines of "Legacy" method in my config.xml

<!-- <splash height="480" src="res/screen/ios/Default~iphone.png" width="320" />
    <splash height="960" src="res/screen/ios/Default@2x~iphone.png" width="640" />
    <splash height="1024" src="res/screen/ios/Default-Portrait~ipad.png" width="768" />
    <splash height="2048" src="res/screen/ios/Default-Portrait@2x~ipad.png" width="1536" />
    <splash height="768" src="res/screen/ios/Default-Landscape~ipad.png" width="1024" />
    <splash height="1536" src="res/screen/ios/Default-Landscape@2x~ipad.png" width="2048" />
    <splash height="1136" src="res/screen/ios/Default-568h@2x~iphone.png" width="640" />
    <splash height="1334" src="res/screen/ios/Default-667h.png" width="750" />
    <splash height="2208" src="res/screen/ios/Default-736h.png" width="1242" />
    <splash height="1242" src="res/screen/ios/Default-landscape-736h.png" width="2208" />
    <splash height="2436" src="res/screen/ios/Default-Portrait-2436h@3x.png" width="1125" />
    <splash height="2688" src="res/screen/ios/Default-Portrait-2688h@3x.png" width="1242" />
    <splash height="1792" src="res/screen/ios/Default-Portrait-1792h@2x.png" width="828" /> -->

I added a line as "Storyboard" method in my config.xml to replace the lines above

The width and height of the image is 2732 x 2732 as described here: https://community.adobe.com/t5/phonegap-build/storyboard-splashscreen-not-working/td-p/9732197?page=1
I built my project for ios and I launched the emulator to check the result
```
cordova build ios
cordova emulate ios
```

And Voila!, the splashscreen is well displayed but not with the good proportion for the emulator device is used...

In conclusion, cordova-ios 6.1.0 support the splashscreen but only with the "Storyboard" method. The "Legacy" one is not.

erisu commented 4 years ago

Yes, as you have pointed out, the legacy launch images are no longer supported. Since Cordova-iOS 6.0, you should be migrating to use Launch Storyboard.

This was mentioned in the release blog post,

Integrated SplashScreen plugin code & replaced Launch Images with Launch Storyboards

If you're migrating from launch images, details on how to set up images for Launch Storyboards can be found in the SplashScreen documentation.

https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-splashscreen/index.html#launch-storyboard-images

The integration work of SplashScreen code and as well the deprecation of the legacy launch images were performed in PR #790.

In the PR description:

Apple is deprecating Launch Images and will require Launch Storyboards for all apps as of April 2020 (Closes #770).

I will be closing this issue as you have concluded the cause of the white SplashScreen for your app, pointed out the solution, and that the legacy support is not something we are providing.

apache / cordova-ios