cli-6.0.0 gives wrong icon and splash on iOS

  • 19
  • Problem
  • Updated 4 years ago
When using cli-6.0.0 the app icon and splash screen on iOS are replaced with the default cordova ones. Not reproducible on 5.2.0. Maybe it's related to https://issues.apache.org/jira/browse... ?
Photo of Bastian Schwetzel

Bastian Schwetzel

  • 6 Posts
  • 0 Reply Likes
  • confused

Posted 4 years ago

  • 19
Photo of Q Fchx

Q Fchx

  • 1 Post
  • 0 Reply Likes
Same issue here...
A hotfix is warmly welcomed. Impossible to use in production without a proper icon/splash.
Photo of ColinBau

ColinBau

  • 730 Posts
  • 18 Reply Likes
I have the same problem
when in 5.4.1,icon and splash good to work
after upgrade to 6.0.0,all pic become black...
Photo of Quentin Dreyer

Quentin Dreyer

  • 6 Posts
  • 0 Reply Likes
Same problem here, tried to move the res folder from /www/res to /res, no effects.
Photo of Scott Bolinger

Scott Bolinger

  • 16 Posts
  • 2 Reply Likes
I am also seeing default icon/splash, my app won't load at all on cli-6.0. No issues with cli-5.2.0, all my plugins are the latest from npm.
Photo of bCliks

bCliks

  • 34 Posts
  • 0 Reply Likes
Same issue here. Any Update?
Photo of Kevin

Kevin

  • 5 Posts
  • 0 Reply Likes
I am getting the generic icon and splash as well with 6.0.0.

everything else is working great.
Photo of DFull

DFull

  • 16 Posts
  • 0 Reply Likes
Same (icon) issue here and my state.go is never reached :
$ionicPlatform.ready(function() {
if (typeof StatusBar !== "undefined") {
StatusBar.overlaysWebView(true);
StatusBar.styleLightContent();
}
setTimeout(function() {
if (typeof navigator.splashscreen !== "undefined") {
navigator.splashscreen.hide();
}
}, 200);
$state.go('check');
});

Everithing works with 5.2.0
Photo of ryan

ryan, Developer

  • 1538 Posts
  • 132 Reply Likes
Looking into this.
Photo of bCliks

bCliks

  • 34 Posts
  • 0 Reply Likes
@ryan Any Update on this issue?
Photo of JesseMonroy650 (Volunteer)

JesseMonroy650 (Volunteer), Champion

  • 3325 Posts
  • 122 Reply Likes
Photo of Ben McMaster

Ben McMaster

  • 66 Posts
  • 1 Reply Like
+1
Photo of Артем Кунец

Артем Кунец

  • 2 Posts
  • 0 Reply Likes
I have the same issue, i tried to move and rename, didn't work
Photo of s2ee

s2ee

  • 2 Posts
  • 0 Reply Likes
Same issue for me.
Photo of Ben McMaster

Ben McMaster

  • 66 Posts
  • 1 Reply Like
+1
Any one figure this out yet?
Photo of ryan

ryan, Developer

  • 1538 Posts
  • 132 Reply Likes
This should be fixed now guys. The location of icons in cordova-ios 4.0.1 had changed. Sorry for the inconvenience.
Photo of Kevin

Kevin

  • 5 Posts
  • 0 Reply Likes
looking good here, except the app icon in the app switcher is still the generic icon.

is that a new config option?
Photo of ryan

ryan, Developer

  • 1538 Posts
  • 132 Reply Likes
Hrm I don't think that's new, and its showing up fine for me. Here's the icons I have defined:


<!-- iPhone 6 / 6+ -->
<icon src="res/icon/ios/icon-60@3x.png" platform="ios" width="180" height="180" />

<!-- iPhone / iPod Touch -->
<icon src="res/icon/ios/icon-60.png" platform="ios" width="60" height="60" />
<icon src="res/icon/ios/icon-60@2x.png" platform="ios" width="120" height="120" />

<!-- iPad -->
<icon src="res/icon/ios/icon-76.png" platform="ios" width="76" height="76" />
<icon src="res/icon/ios/icon-76@2x.png" platform="ios" width="152" height="152" />

<!-- Settings Icon -->
<icon src="res/icon/ios/icon-small.png" platform="ios" width="29" height="29" />
<icon src="res/icon/ios/icon-small@2x.png" platform="ios" width="58" height="58" />

<!-- Spotlight Icon -->
<icon src="res/icon/ios/icon-40.png" platform="ios" width="40" height="40" />
<icon src="res/icon/ios/icon-40@2x.png" platform="ios" width="80" height="80" />


I think it might be the 80px "Spotlight" icon on my iPhone 6.
Photo of Bastian Schwetzel

Bastian Schwetzel

  • 6 Posts
  • 0 Reply Likes
Unfortunately none of those are the ones for iPhone 6+. I'm using the following sizes: 29, 40, 57, 58, 72, 76, 80, 114, 120, 144, 152, 180
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
Icon sizes:
https://developer.apple.com/library/i...

You are missing the 87x87 (only recommended, not required)
Photo of Bastian Schwetzel

Bastian Schwetzel

  • 6 Posts
  • 0 Reply Likes
This doesn't fix it either :-(
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
Just to make sure: do you have both index.html and config.xml in the ROOT ("/") of your uploaded zip file? Not in any directory under the root?
And are you sure the paths in config are OK (so you have a directory /res directly under the root, not something like /www first)?
Photo of Bastian Schwetzel

Bastian Schwetzel

  • 6 Posts
  • 0 Reply Likes
What we have now is www, which our only config.xml is in. The paths are relative to www, meaning we have www/res, just like in https://github.com/phonegap/phonegap-.... This was, as I stated, working in 5.2.0 and is, for most of the icons, working in 6.0.0 now. What is not working is the icon in the app switcher and all of the splashes, which, again, worked just fine under 5.2.0.
Photo of ColinBau

ColinBau

  • 730 Posts
  • 18 Reply Likes
hi Ryan
thank you for your reply
after rebuild,the icon and splashscreen all show up
but it appear a strange behavior


no mater I define these picture or not in my config.xml
these strange picture will all show up

Cordova Cli also have the "87X87" problem
https://issues.apache.org/jira/browse...
but only 87X87
Photo of ryan

ryan, Developer

  • 1538 Posts
  • 132 Reply Likes
@ColinBau what's your App ID?
Photo of ColinBau

ColinBau

  • 730 Posts
  • 18 Reply Likes
@ryan
my App ID is 697726
Photo of Bastian Schwetzel

Bastian Schwetzel

  • 6 Posts
  • 0 Reply Likes
Now our build fails with the following:

/* com.apple.actool.errors */
/project/DeveSuite/Images.xcassets: error: The launch image set named "LaunchImage" did not have any applicable content.

Our AppID is 1546901

config.xml:

<icon src="icon.png" />
<icon src="res/icon/android/icon-36-ldpi.png" gap:platform="android" gap:density="ldpi" />
<icon src="res/icon/android/icon-48-mdpi.png" gap:platform="android" gap:density="mdpi" />
<icon src="res/icon/android/icon-72-hdpi.png" gap:platform="android" gap:density="hdpi" />
<icon src="res/icon/android/icon-96-xhdpi.png" gap:platform="android" gap:density="xhdpi" />
<icon src="res/icon/android/icon-144-xxhdpi.png" gap:platform="android" gap:density="xxhdpi" />
<icon src="res/icon/ios/icon-57.png" gap:platform="ios" width="57" height="57" />
<icon src="res/icon/ios/icon-72.png" gap:platform="ios" width="72" height="72" />
<icon src="res/icon/ios/icon-76.png" gap:platform="ios" width="76" height="76" />
<icon src="res/icon/ios/icon-57-2x.png" gap:platform="ios" width="114" height="114" />
<icon src="res/icon/ios/icon-120.png" gap:platform="ios" width="120" height="120" />
<icon src="res/icon/ios/icon-72-2x.png" gap:platform="ios" width="144" height="144" />
<icon src="res/icon/ios/icon-76-2x.png" gap:platform="ios" width="152" height="152" />
<icon src="res/icon/windows-phone/icon-48.png" gap:platform="winphone" />
<icon src="res/icon/windows-phone/icon-173.png" gap:platform="winphone" gap:role="background" />

<!-- Define app splash screen for each platform. -->
<gap:splash src="splash.png" />

<!-- Android -->
<gap:splash src="splash.png" gap:platform="android" gap:qualifier="land-ldpi" />
<gap:splash src="splash.png" gap:platform="android" gap:qualifier="port-ldpi" />
<gap:splash src="splash.png" gap:platform="android" gap:qualifier="land-mdpi" />
<gap:splash src="splash.png" gap:platform="android" gap:qualifier="port-mdpi" />
<gap:splash src="splash.png" gap:platform="android" gap:qualifier="land-hdpi" />
<gap:splash src="splash.png" gap:platform="android" gap:qualifier="port-hdpi" />
<gap:splash src="splash.png" gap:platform="android" gap:qualifier="land-xhdpi" />
<gap:splash src="splash.png" gap:platform="android" gap:qualifier="port-xhdpi" />
<gap:splash src="splash.png" gap:platform="android" gap:qualifier="land-xxhdpi" />
<gap:splash src="splash.png" gap:platform="android" gap:qualifier="port-xxhdpi" />

<!-- iPhone -->
<gap:splash src="splash.png" gap:platform="ios" width="320" height="480" />
<gap:splash src="splash.png" gap:platform="ios" width="480" height="320" />
<gap:splash src="splash.png" gap:platform="ios" width="640" height="960" />
<gap:splash src="splash.png" gap:platform="ios" width="960" height="640" />
<gap:splash src="splash.png" gap:platform="ios" width="640" height="1136" />
<gap:splash src="splash.png" gap:platform="ios" width="1136" height="640" />
<gap:splash src="splash.png" gap:platform="ios" width="750" height="1334" />
<gap:splash src="splash.png" gap:platform="ios" width="1334" height="750" />
<gap:splash src="splash.png" gap:platform="ios" width="1242" height="2208" />
<gap:splash src="splash.png" gap:platform="ios" width="2208" height="1242" />

<!-- iPad -->
<gap:splash src="splash.png" gap:platform="ios" width="768" height="1024" />
<gap:splash src="splash.png" gap:platform="ios" width="1024" height="768" />
<gap:splash src="splash.png" gap:platform="ios" width="1536" height="2048" />
<gap:splash src="splash.png" gap:platform="ios" width="2048" height="1536" />
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
Well, how can you have one file called 'splash.png' that corresponds with so many different dimensions? You need to include separate graphics for each of the specified dimensions.
Photo of Bastian Schwetzel

Bastian Schwetzel

  • 6 Posts
  • 0 Reply Likes
That was not a problem in 5.2.0. Anyways, removing the unnecessary entries lets me build, but still the default splash is used. Why? Moving the splash-tag outside the platform-tag doesn't change anything.


<platform name="android">
<icon src="res/icon/android/icon-36-ldpi.png" density="ldpi" />
<icon src="res/icon/android/icon-48-mdpi.png" density="mdpi" />
<icon src="res/icon/android/icon-72-hdpi.png" density="hdpi" />
<icon src="res/icon/android/icon-96-xhdpi.png" density="xhdpi" />
<icon src="res/icon/android/icon-144-xxhdpi.png" density="xxhdpi" />
<splash src="splash.png" />
</platform>

<platform name="ios">
<icon src="res/icon/ios/icon-57.png" width="57" height="57" />
<icon src="res/icon/ios/icon-72.png" width="72" height="72" />
<icon src="res/icon/ios/icon-76.png" width="76" height="76" />
<icon src="res/icon/ios/icon-57-2x.png" width="114" height="114" />
<icon src="res/icon/ios/icon-120.png" width="120" height="120" />
<icon src="res/icon/ios/icon-72-2x.png" width="144" height="144" />
<icon src="res/icon/ios/icon-76-2x.png" width="152" height="152" />
<splash src="splash.png" />
</platform>


Info: splash.png is a 100x100 plain white 24-bit PNG. Therefore scaling isn't an issue.. It's included this way because of strange behaviour when changing pages inside the app.
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
There is no iOS device with a 100x100px screen. You MUST have the graphics as required by Apple (otherwise you won't be able to upload to AppStore, anyway).
If you encounter "strange behaviour", you most likely have an additional problem that needs to be solved separately.

So:
- include splashes for each dimension as set forth by Apple. Include each in your assets and reference each in your config
- include the splashscreen plugin from npm, and for iPad, include the statusbar plugin from npm.
Photo of Frank Chabrie

Frank Chabrie

  • 9 Posts
  • 0 Reply Likes
I have deactivated the WKWebView and my icons and splash screens came back
Photo of DFull

DFull

  • 16 Posts
  • 0 Reply Likes
How to enable/disable WKWebView from PGB?
Photo of ryan

ryan, Developer

  • 1538 Posts
  • 132 Reply Likes
I believe you just need to add the wkwebview-engine plugin.

If you have further questions maybe make a new thread about this.
Photo of DFull

DFull

  • 16 Posts
  • 0 Reply Likes
@ryan : thanks for the link but I don't understand how to add permissions in PGB config file.

Permission part mentions :
<feature name="CDVWKWebViewEngine">
<param name="ios-package" value="CDVWKWebViewEngine" />
</feature>

<preference name="CordovaWebViewEngine" value="CDVWKWebViewEngine" />

But how to write it in the PGB config.xml?
I try to copy/paste but it doesn't work and the documentation is not enough clear for me about the the plugin specific configuration

Thanks for your help
Photo of ryan

ryan, Developer

  • 1538 Posts
  • 132 Reply Likes
@DFull you don't don't need to add those permissions, adding the plugin will inject those permissions programmatically (see here). Add this to your config.xml only:
<plugin name="cordova-plugin-wbkwebview-engine" />
Photo of DFull

DFull

  • 16 Posts
  • 0 Reply Likes
@ryan : OK! Thanks for this information
Photo of Charles Wells

Charles Wells

  • 9 Posts
  • 1 Reply Like
any update to this? I am having the same issue with default icon in settings and app switcher. config is in www/root. Works fine in 5.2.0 -thanks
Photo of JesseMonroy650 (Volunteer)

JesseMonroy650 (Volunteer), Champion

  • 3325 Posts
  • 122 Reply Likes
Since this is your first post, please answer the following question.
- Is this your first hybrid App?
- Are you using the Desktop App?
- What is your target device/platform and their target versions: Android 4,5,6? iOS 7,8,9?
- Are you using CLI, SDK or Build? Please do not assume the answer, please read the link.

Jesse
Photo of Charles Wells

Charles Wells

  • 9 Posts
  • 1 Reply Like
This is my second Hybrid app that I have been using for a couple years and has been working fine with cli-5.2.0 and 5.4.1 using Phonegap build. I have changed the target to cli-6.0.0 and the settings icon and app switcher icon is showing the default pg icon. I am testing on an iPhone 6+ IOS 9.3 b7. Everything else works fine. I have removed all plugins and get the same result. The generated icon AppIcon29x29@3x.png in the apk is showing the default pg icon. All other icons are fine. When changing back to 5.4.1 the icons work fine.

My IOS icon config

<icon src="icon.png" />
<platform name="ios">
<icon src="res/icon/ios/icon-57.png" width="57" height="57" />
<icon src="res/icon/ios/AppIcon57x572x.png" width="114" height="114" />
<icon src="res/icon/ios/icon-57-2x.png" width="72" height="72" />
<icon src="res/icon/ios/AppIcon29x293x.png" width="87" height="87" />
<!-- iPhone 6 / 6+ -->
<icon src="res/icon/ios/icon-603x.png" width="180" height="180" />

<!-- iPhone / iPod Touch -->
<icon src="res/icon/ios/icon-60.png" width="60" height="60" />
<icon src="res/icon/ios/icon-602x.png" width="120" height="120" />

<!-- iPad -->
<icon src="res/icon/ios/icon-76.png" width="76" height="76" />
<icon src="res/icon/ios/icon-762x.png" width="152" height="152" />

<!-- Settings Icon -->
<icon src="res/icon/ios/icon-small.png" width="29" height="29" />
<icon src="res/icon/ios/icon-small2x.png" width="58" height="58" />

<!-- Spotlight Icon -->
<icon src="res/icon/ios/icon-40.png" width="40" height="40" />
<icon src="res/icon/ios/icon-402x.png" width="80" height="80" />
</platform>

Thanks
Photo of JesseMonroy650 (Volunteer)

JesseMonroy650 (Volunteer), Champion

  • 3325 Posts
  • 122 Reply Likes
@Charles,
okay. Since you are using iPhone 6+ IOS 9.3 b7. and taking in to consideration your description, i am going to call this a bug. I don't know if it is Cordova/Phonegap bug or an iOS bug.

List of link to Cordova Bug Repository

iOS specific bugs <-- check for your bug here and report here, if you can.

How to create a Cordova Bug Report on JIRA

You can pretty much you the text from above. You've described it well and I think the Cordova team will be interested in this.

Best of Luck
Jesse
Photo of Charles Wells

Charles Wells

  • 9 Posts
  • 1 Reply Like
Thank you for your time. I have submitted an issue via JIRA.