Closed dtsc-engenharia closed 3 years ago
Finally i use this solution:
npm rm cordova-ios
npm i cordova-ios@5.1.1
config.xml
<platform name="ios">
<hook src="scripts/patchStoryboard.sh" type="after_prepare" />
...
</platform>
scripts/patchStoryboard.sh
#!/bin/bash
if [[ ! -f /usr/libexec/PlistBuddy ]]; then
exit 0
fi
PLIST=./platforms/ios/*/*-Info.plist
/usr/libexec/PlistBuddy -c 'Delete UILaunchStoryboardName' $PLIST
we may be missing the correct LaunchStoryboard sizes... then it would be enough to use UILaunchScreen and the value LaunchStoryboard
`
<splash src="res/screen/ios/Default@2x~universal~comany.png" />
<splash src="res/screen/ios/Default@2x~universal~comcom.png" />
<splash src="res/screen/ios/Default@3x~universal~anyany.png" />
<splash src="res/screen/ios/Default@3x~universal~anycom.png" />
<splash src="res/screen/ios/Default@3x~universal~comany.png" />
`
we may be missing the correct LaunchStoryboard sizes... then it would be enough to use UILaunchScreen and the value LaunchStoryboard
<splash src="res/screen/ios/Default@2x~universal~anyany.png" /> <splash src="res/screen/ios/Default@2x~universal~comany.png" /> <splash src="res/screen/ios/Default@2x~universal~comcom.png" /> <splash src="res/screen/ios/Default@3x~universal~anyany.png" /> <splash src="res/screen/ios/Default@3x~universal~anycom.png" /> <splash src="res/screen/ios/Default@3x~universal~comany.png" />
Sounds like a good fix. Did you try it?
not yet... maybe tomorrow
Guys I have it ... :-) It already works ... all dimensions need to be prepared ... don't ask me why, but it is so!
<splash src="resources/ios/splash/Default@2x~universal~anyany.png" />
<splash src="resources/ios/splash/Default@2x~universal~comany.png" />
<splash src="resources/ios/splash/Default@2x~universal~comcom.png" />
<splash src="resources/ios/splash/Default@3x~universal~anyany.png" />
<splash src="resources/ios/splash/Default@3x~universal~anycom.png" />
<splash src="resources/ios/splash/Default@3x~universal~comany.png" />
<splash src="resources/ios/splash/Default@2x~iphone~anyany.png" />
<splash src="resources/ios/splash/Default@2x~iphone~comany.png" />
<splash src="resources/ios/splash/Default@2x~iphone~comcom.png" />
<splash src="resources/ios/splash/Default@3x~iphone~anyany.png" />
<splash src="resources/ios/splash/Default@3x~iphone~anycom.png" />
<splash src="resources/ios/splash/Default@3x~iphone~comany.png" />
<splash src="resources/ios/splash/Default@2x~ipad~anyany.png" />
<splash src="resources/ios/splash/Default@2x~ipad~comany.png" />
and run:
ionic cordova build ios
Make sure cordova added it to Images.xcassets ... Do not change anything in info.plist ... leave Launch screen interface file base name: CDVLaunchScreen
Don't forget to invalidate the cache ... delete the application from your phone, turn off / on and clean the new install...
viz link Cordova README
Guys I have it ... :-) It already works ... all dimensions need to be prepared ... don't ask me why, but it is so!
<splash src="resources/ios/splash/Default@2x~universal~anyany.png" /> <splash src="resources/ios/splash/Default@2x~universal~comany.png" /> <splash src="resources/ios/splash/Default@2x~universal~comcom.png" /> <splash src="resources/ios/splash/Default@3x~universal~anyany.png" /> <splash src="resources/ios/splash/Default@3x~universal~anycom.png" /> <splash src="resources/ios/splash/Default@3x~universal~comany.png" /> <splash src="resources/ios/splash/Default@2x~iphone~anyany.png" /> <splash src="resources/ios/splash/Default@2x~iphone~comany.png" /> <splash src="resources/ios/splash/Default@2x~iphone~comcom.png" /> <splash src="resources/ios/splash/Default@3x~iphone~anyany.png" /> <splash src="resources/ios/splash/Default@3x~iphone~anycom.png" /> <splash src="resources/ios/splash/Default@3x~iphone~comany.png" /> <splash src="resources/ios/splash/Default@2x~ipad~anyany.png" /> <splash src="resources/ios/splash/Default@2x~ipad~comany.png" />
and run:
ionic cordova build ios
Make sure cordova added it to Images.xcassets ... Do not change anything in info.plist ... leave Launch screen interface file base name: CDVLaunchScreen
Hi @davidpadych That's awesome! I thought this solution might work but I didn't have time to try it. Thanks for sharing! Will try it as soon as I have some time!
The explanation is simple: iOS 14 is using a splash format other than the regular "Default@2x~universal~anyany.png". Maybe the default 3x (I don't know). Since we don't know which one is being used for a specific device, It seems to be a good idea to provide all of them, just like you did.
Will try this solution soon and will let you know about the results,
Thanks!
@davidtoledo Cordova resources doesn't generate following files automatically:
<splash src="resources/ios/splash/Default@2x~universal~anyany.png" />
<splash src="resources/ios/splash/Default@2x~universal~comany.png" />
<splash src="resources/ios/splash/Default@2x~universal~comcom.png" />
<splash src="resources/ios/splash/Default@3x~universal~anyany.png" />
<splash src="resources/ios/splash/Default@3x~universal~anycom.png" />
<splash src="resources/ios/splash/Default@3x~universal~comany.png" />
<splash src="resources/ios/splash/Default@2x~iphone~anyany.png" />
<splash src="resources/ios/splash/Default@2x~iphone~comany.png" />
<splash src="resources/ios/splash/Default@2x~iphone~comcom.png" />
<splash src="resources/ios/splash/Default@3x~iphone~anyany.png" />
<splash src="resources/ios/splash/Default@3x~iphone~anycom.png" />
<splash src="resources/ios/splash/Default@3x~iphone~comany.png" />
<splash src="resources/ios/splash/Default@2x~ipad~anyany.png" />
<splash src="resources/ios/splash/Default@2x~ipad~comany.png" />
What the best way to create this resources before build and avoid errors ?
@davidtoledo Cordova resources doesn't generate following files automatically:
<splash src="resources/ios/splash/Default@2x~universal~anyany.png" /> <splash src="resources/ios/splash/Default@2x~universal~comany.png" /> <splash src="resources/ios/splash/Default@2x~universal~comcom.png" /> <splash src="resources/ios/splash/Default@3x~universal~anyany.png" /> <splash src="resources/ios/splash/Default@3x~universal~anycom.png" /> <splash src="resources/ios/splash/Default@3x~universal~comany.png" /> <splash src="resources/ios/splash/Default@2x~iphone~anyany.png" /> <splash src="resources/ios/splash/Default@2x~iphone~comany.png" /> <splash src="resources/ios/splash/Default@2x~iphone~comcom.png" /> <splash src="resources/ios/splash/Default@3x~iphone~anyany.png" /> <splash src="resources/ios/splash/Default@3x~iphone~anycom.png" /> <splash src="resources/ios/splash/Default@3x~iphone~comany.png" /> <splash src="resources/ios/splash/Default@2x~ipad~anyany.png" /> <splash src="resources/ios/splash/Default@2x~ipad~comany.png" />
What the best way to create this resources before build and avoid errors ?
@roman-rr Yes. It doesn't. You have to generate your splash screen files according to the instructions stated at:
Here are the list of files and image aspects you have to generate:
2x | universal | any | any | 2732x2732 | Default@2x~universal~anyany.png 2x | universal | com | any | 1278x2732 | Default@2x~universal~comany.png 2x | universal | com | com | 1334x750 | Default@2x~universal~comcom.png 3x | universal | any | any | 2208x2208 | Default@3x~universal~anyany.png 3x | universal | any | com | 2208x1242 | Default@3x~universal~anycom.png 3x | universal | com | any | 1242x2208 | Default@3x~universal~comany.png
You can generate these images manually using any image editor you like,
Make sure all the important content (texts, logos, relevant figures) are inside the safe area into these images and generate the files according to the file names and image aspects listed above.
...and please let us know if the problem is solved after you make these changes.
I prepared them manually in GIMP... I would add it as a requirement rather to the cordova-res plugin ..
Cordova documentation:
scale | idiom | width | height | size | filename |
---|---|---|---|---|---|
2x* | universal | any | any | 2732x2732 | Default@2x~universal~anyany.png |
2x | universal | com | any | 1278x2732 | Default@2x~universal~comany.png |
2x | universal | com | com | 1334x750 | Default@2x~universal~comcom.png |
3x* | universal | any | any | 2208x2208 | Default@3x~universal~anyany.png |
3x | universal | any | com | 2208x1242 | Default@3x~universal~anycom.png |
3x | universal | com | any | 1242x2208 | Default@3x~universal~comany.png |
scale | idiom | width | height | size | filename |
---|---|---|---|---|---|
2x* | iphone | any | any | 1334x1334 | Default@2x~iphone~anyany.png |
2x | iphone | com | any | 750x1334 | Default@2x~iphone~comany.png |
2x | iphone | com | com | 1334x750 | Default@2x~iphone~comcom.png |
3x* | iphone | any | any | 2208x2208 | Default@3x~iphone~anyany.png |
3x | iphone | any | com | 2208x1242 | Default@3x~iphone~anycom.png |
3x | iphone | com | any | 1242x2208 | Default@3x~iphone~comany.png |
2x* | ipad | any | any | 2732x2732 | Default@2x~ipad~anyany.png |
2x | ipad | com | any | 1278x2732 | Default@2x~ipad~comany.png |
I confirm that only adding the Default@2x~iphone~anyany.png
finally solved the issue for us. I did have to delete + reboot iPhone in order to see a difference (also did Clean Build Folder (Cmd + Shift + K in Xcode) just in case). Not sure if relevant, but we also have a dark version of the launch screen.
At the end we only have these assets:
<splash width="2732" height="2732" src="www/res/splash/Default@2x~universal~anyany.png" />
<splash width="2732" height="2732" src="www/res/splash/Default@2x~universal~anyany~dark.png" />
<splash width="1334" height="1334" src="www/res/splash/Default@2x~iphone~anyany.png" />
<splash width="1334" height="1334" src="www/res/splash/Default@2x~iphone~anyany~dark.png" />
I can also confirm, replacing the screens and adding additional sizes has fixed the issue on my end. Works both in Cordova 5.1.1
and Cordova 6.1.1
.
That's it!
The solution is finally confirmed!
As we can see, something changed in the way splash screens are handled in iOS 14:
The entry <splash src="res/screen/ios/Default@2x~universal~anyany.jpg" />
is no longer being used for iPhones.
Now we have to add this entry: <splash src="res/screen/ios/Default@2x~iphone~anyany.jpg" />
in order to get iPhone devices covered too.
For people using only the universal~anyany entry (the only entry necessary in previous iOS versions): you just have to add the iphone~anyany entry to your config.xml file and you are good to go.
See example below:
<splash src="<path to your image>/Default@2x~universal~anyany.jpg" />
<splash src="<path to your image>/Default@2x~iphone~anyany.jpg" />
Obviously you also have to create another image file called Default@2x~iphone~anyany.jpg (or png) with the resolution 1334 x 1334 pixels and put it inside your splash screen images directory.
Another thing that I noticed is that the splash screen fading effect is no longer working if the FadeSplashScreenDuration entry is not stated in the config.xml file.
So, you just have to add this line to your config.xml file and you will get the same default fading effect as in the previous iOS versions:
<preference name="FadeSplashScreenDuration" value="500"/>
Thank you very much for all collaborators in this thread.
I believe the final solution is finally found!
It works like charm!! Thanks @davidpadych @davidtoledo
solvedx3!
cordova 10.0.0 ios: 6.1.0
maybe this helps some one, I spent some hours updating our app, solving this new splash black screen issue, here the step-by-step: (i recommend building a new app just to make it work; zip/backup the original one)
Default@2x~iphone~anyany.png
(size: 1334 × 1334)Default@3x~iphone~anyany.png
(size: 2208 ×2208)Default@2x~ipad~anyany.png
(size: 2732 × 2732)<platform name="ios">
<splash src="res/screen/ios/Default@2x~iphone~anyany.png" />
<splash src="res/screen/ios/Default@3x~iphone~anyany.png" />
<splash src="res/screen/ios/Default@2x~ipad~anyany.png" />
</platform>
some tips:
additional thoughts: since everybody is using a splash image, cordova could provide dummy data for future versions and avoid issues
Should this be solved in the Hello World template for new apps?
Should this be documented - https://github.com/apache/cordova-docs/issues/1144?
I would say yes, at least for this builds specs.
On Wed, Dec 30, 2020 at 1:23 AM Chris Brody notifications@github.com wrote:
Should this be solved in the Hello World template for new apps?
Should this be documented - apache/cordova-docs#1144 https://github.com/apache/cordova-docs/issues/1144?
— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/apache/cordova-ios/issues/990#issuecomment-752284608, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABIFMRR7L3HGONBTNZJJ27LSXJXHXANCNFSM4RSZ5PJQ .
@philippogol One of the things your mentioning as tips to remove the app and reinstall when the splash screen is not reflected is a known quirk with iOS and had already been mentioned in docs.
Also, IMO I think it is not necessary to add anything to the hello world app. User should add their own splash screen. Additionally if we add, then we have to add for all various platforms, and then the users must replace all or delete...
I'd say this is not a fix, but a workaround. I'd still like to have a feature where I provide a single image, and then the Cordova build process takes care of the sizes.
I'd say this is not a fix, but a workaround. I'd still like to have a feature where I provide a single image, and then the Cordova build process takes care of the sizes.
Cordova supports this on iOS. See https://github.com/apache/cordova-plugin-splashscreen#single-image-launch-screen
Note this only works well if your splashscreen is relatively simple.
Cordova supports this on iOS.
Of course, but not without the problem described in this issue. That's how I ended up here : )
It would sure be nice if this could be fixed - cordova-ios should be able to transform a universal-anyany image for iOS 14 devices just like it always did. Why was this ever closed when the bug still exists? There's no fix here or in the splashscreen plugin, @breautek.
@philippogol The set of three images seems to at least improve the behavior. Cheers.
Cordova has never transformed nor done any image manipulation, the thing is iOS "allowed" to have a single image that was displayed for all the devices, but on iOS 14, if the image is too big as recommended by the "single image" tip, it doesn't display on iPhone devices anymore. So it's not a cordova bug and cordova won't be doing anything to fix that, in any case document that it doesn't work for iOS 14 anymore on iPhone devices.
Bug Report
Problem
It appears that the plugin is not working how it used to be on previous iOS versions. After upgrading to iOS 14, a black screen is shown very quickly before the real splash screen image is shown.
The easiest way to simulate the problem is using iOS simulator. A black screen will show up before splash and stay there for a few seconds. When I run on device, I can also see the black screen before splash but it happens very quickly.
What is expected to happen?
Splash screen is supposed to appear immediately after opening the app. A black screen is shown before the splash screen appears. Also the splash screen appears very quickly and disappears before the expected time compared to previous versions of the plug-in.
What does actually happen?
Black screen appears before splash screen
Information
I am using only the Default 2x universal image in my config.xml:
Additional splash screen configurations are:
Command or code
I am using cordova-plugin-splashscreen 6.1.1
Environment, Platform, Device
Version information
iOS 14 Cordova 10 Cordova android 9.0.0 Cordova ios 6.1.1
Checklist