CB-13191: (ios) Support marketing icon

[DirtyHairy]

Platforms affected

iOS

What does this PR do?

Adds support for the marketing icon. This is required for app submission since XCode 9.

What testing has been done on this change?

Ran cordova prepare and made sure that the icon referenced from config.xmlgets properly added and is displayed in XCode.

Checklist

• Reported an issue in the JIRA database
• Commit message follows the format: "CB-3232: (android) Fix bug with resolving file paths", where CB-xxxx is the JIRA ID & "android" is the platform affected.
• Added automated test coverage as appropriate for this change.

[codecov-io]

Codecov Report

Merging #337 into master will not change coverage.
The diff coverage is n/a.

@@           Coverage Diff           @@
##           master     #337   +/-   ##
=======================================
  Coverage   63.75%   63.75%           
=======================================
  Files          14       14           
  Lines        1680     1680           
  Branches      280      280           
=======================================
  Hits         1071     1071           
  Misses        609      609

Impacted Files	Coverage Δ
bin/templates/scripts/cordova/lib/prepare.js	84.66% <ø> (ø)	⬆️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update a20aedd...46c4e2c. Read the comment docs.

[stripathix]

What tag goes in config.xml to load App Store marketing icon in xCode?

[DirtyHairy]

You register it as an icon resource with width and height set to 1024px:

<icon height="1024" width="1024" src="icons/ios/icon-1024.png" />

[stripathix]

Thanks :-).

Just one problem I am not able to update to cordova-ios@4.5.1

Shashwats-MacBook-Pro:dist-phonegap shashwat$ cordova platform add ios@4.5.1
Using cordova-fetch for cordova-ios@4.5.1
Error: Failed to fetch platform cordova-ios@4.5.1
Probably this is either a connection problem, or platform spec is incorrect.
Check your connection and platform name/version/URL.
Error: npm: Command failed with exit code 1 Error output:
npm ERR! code ETARGET
npm ERR! notarget No matching version found for cordova-ios@4.5.1
npm ERR! notarget In most cases you or one of your dependencies are requesting
npm ERR! notarget a package version that doesn't exist.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/shashwat/.npm/_logs/2017-09-25T05_28_07_333Z-debug.log

[geesen]

@stripathix 4.5.1 is not yet available via NPM, but you can use the specific tag:

cordova platform add https://github.com/apache/cordova-ios.git#4.5.1

[surajpindoria]

@stripathix

I have just released cordova-ios@4.5.1 to npm. So that issue should be resolved.

[ThorvaldAagaard]

I added the line in config.json with

<icon height="1024" width="1024" src="icons/ios/icon-1024.png" />

upgraded to Ios 4.5.2, but still get the warning when uploading to app store.

I then updated the icon using XCode, and it updated Contents.json with the following

{
"idiom" : "Ios-marketing",
"size" : "1024x1024",
"scale" : "1x"
}

Have I missed to execute something, or are there still a bug?

I can see I have an icon-1024.png as part of my solution

I still get the warning

[pinkahd]

I'm having the same issue I've added the correct lines in cordova config but it's not building under ios 4.5.2 downgraded to 4.5.1 and the icons started copying I think this may be a bug in ios 4.5.2

[surajpindoria]

@ThorvaldAagaard Did you run cordova prepare ios? That should update the icons and you can then double check in Xcode. There is also a bug in 4.5.2 where I forgot to add one of the icons back in, it will be fixed in the next release which should be out this week.

[Gemeapp]

I managed to fix the issue by adding the image where ressources normally are generated, and then add the icon using XCode 9.

I noticed the lack of a lot of other ressources, and is thinking it would be a good idea to create a clean example project and the look at the generated.

I my project I am missing icons for notification

and also ipad notification.

And then all the icons for Apple Watch, but thats ok

[surajpindoria]

@Gemeapp Which version of cordova-ios are you using? I added in the mapping for the remaining icons which included the Apple Watch ones too.

[ThorvaldAagaard]

Great. I am using 4.5.2

[ThorvaldAagaard]

Gemeapp is also me. I didn't notive I was logged in with my company user

[Gemeapp]

What is the proper way of getting AppIcon updated?

This is my environment

This is my platforms

I have removed and readded the ios platform

Ran ionic cordova resources

Builded the application, and now I am just missing a single icon, that is used in two places

[Gemeapp]

One more thing as I get some warnings in XCode you probably need to check

[janpio]

@Gemeapp @ThorvaldAagaard Something is broken here, ionic info is reporting different things than the platform list. You should create a topic at https://forum.ionicframework.com/ (include the same screenshots and info as here) and post the link to it here so I can help you debug that.

[ThorvaldAagaard]

I am updating all to latest version so when done I will verify that the problem still is here. I might have taken the 2 screen shots at diffefent times as I saw IOS platform was reverted to 4.4.0

[surajpindoria]

@Gemeapp That single missing icon is the bug that I mentioned earlier. I am starting the release process to get a version out that will resolve this.

As to those warnings, you may want to check the actual images that you are using. Cordova will not resize the images for you and by the looks of it they all seem to be of size 96x96.

[ThorvaldAagaard]

I have just 2 images and then i run ionic cordova resources to get all images generated

Isn't that ok?

[janpio]

If that doesn't generate the sizes of the file that are expected by Xcode, this would be a bug on Ionic's site: ionic cordova resources uses a server side API. But your outdated @ionic/app-scripts might also play a role there.

[surajpindoria]

@ThorvaldAagaard Just spoke with someone from Ionic and he said that this command should properly resize the images. He suggested updating to the latest, npm install -g ionic@latest, because they recently added fixes for the new icon sizes.

[ThorvaldAagaard]

I am on the bleeding edge of all version now (And it wasn't easy)

I can see that Ionic cordova resources generates the following images

But neither of these have the sizes mentioned in the warnings

I can see that Appicon.appicons is created during build, but I have no clue, how the process from the above files to the AppIcon.appicons are.

To mee it looks like that if it doesnt fint one with the right dimensions the it creates (or copy) one with size 96*96

[janpio]

Have you removed and re-added the ios platform?
As you displayed yourself Ionic doesn't create any 96x96 image. So this has to come from somewhere else.

(You are still abusing the comments of a merged pull request for a normal usage problem by the way...)

[ThorvaldAagaard]

Sorry for not creating a real issue. Let us stop here. I will see if I can find time to recreate the problem in an empty project. But Android is my primary target, so I am no specialist in IOS.

But thx for the help

[jacobweber]

There's nothing in the docs about this.

[janpio]

Paying whom @ibrent?

[stripathix]

hahahaha @ibrent its open source.... why are you paying? and to whom are you paying?

[ibrent]

The following fix worked. But there are small things to notice.

1. Make sure your 1024 icon is the correct size with no transparency or alpha channel. You can see this if you COMMAND-i while the icon is selected. This info window will tell you the size, format and if there is alpha. If there is, open it in your photo editing tool and fix it or I think Preview will do it too when you save.

2. Add this to your config XML:

<icon src="icon/ios/icon.png" width="1024" height="1024" />
<preference name="phonegap-version" value="cli-7.1.0" />

3. Make sure to remove the old reference to an 'icon.png' in your config.xml. It was the first entry of my icons. There may be a tiny one there if you used PG app to build a hello world app. Replace the old reference with the new one. Make sure the image path correctly matches your icon folder path.

4. Add your new 1024px icon.png into your icon image folder. Delete the old image which may be named 'icon.png' with this new 1024px one. I just renamed the existing one 'icon-old.png'.

This worked for me, but I spent a day searching the web and trying stuff. And this is a 2-year-old BUG. Good luck.