Universal App with Visual Studio tools for Apache Cordova – iOS Distribution

February 6, 2017October 31, 2019leszekj Leave a comment

Practical steps to create universal app with VS2015. Based on the oryginal post by Authored by Norm Estabrook with contributions from Raghav Katyal, Mikejo5001, rido-min,Linda Z with comments.

Package the iOS version of your app

Prerequisites

Install node.js

https://nodejs.org/en/download/ – install node, make sure that /usr/local/bin is on $PATH
https://www.npmjs.com/package/remotebuild/ – install remotebuild tool:
- sudo npm install -g remotebuild
- remotebuild —> run remotebuild
- remotebuild –secure false
- remotebuild certificates generate

Checklist before publication

1. Make sure version number has been updated

It can’t be changed later on, during the process

2. Configure for Archive (iOS)

Before creating an archive make sure that development team is selected in general section of project’s configuration.

Request a distribution certificate.
Create a distribution provisioning profile.
Download the distribution provisioning profile in Xcode.
Modify the settings of your app.
Create the package.

Simplified steps (iOS)

Prepare app to run on iPhone X
https://blog.phonegap.com/displaying-a-phonegap-app-correctly-on-the-iphone-x-c4a85664c493

Step 0: Run remote tools on Mac:

remotebuild –secure false

Stap 1: Run remote iOS build in Visual Studio

Step 2: Copy project from: /Users/leszekj/.taco_home/remote-builds/taco-remote/builds to your prefered directory on Mac

Step 3: Open project in Xcode from …/cordovaApp/platforms/ios

Step 4: Check icons and images in Xcode distribution. Icons are located in: \cordovaApp\platforms\ios\<App_name>\Images.xcassets\AppIcon.appiconset\
Make sure, that the icon set is correct.

Step 5: Update warnings to recommended settings

Step 6: Select a development team

Step 7: Update <app-name>-info.plist file > add

NSAppTransportSecurity

NSAllowsArbitraryLoads

NSExceptionDomains

your_json_source

to allow access to remote JSON sources

In case of problems with TSL

<key>NSAppTransportSecurity</key>

<dict>

<key>NSExceptionDomains</key>

<dict>

<key>flightplanning.navcanada.ca</key>

<dict>

<key>NSExceptionMinimumTLSVersion</key>

<key>NSExceptionRequiresForwardSecrecy</key>

</dict>

Step 8: Run application on local device (iPhone or iPad)

Step 9: Run menu > Product > Analyze

Step 10: Run menu > Product > Archive

In case of error, uncheck “Automatically manage signing”, select development profile, and check again “Automatically manage signing”. Then re-run archive

https://stackoverflow.com/questions/40824727/i-get-conflicting-provisioning-settings-error-when-i-try-to-archive-to-submit-an

For those coming from Ionic or Cordova, you can try the following:

Open the file yourproject/platforms/ios/cordova/build-release.xcconfig and change from this:

CODE_SIGN_IDENTITY = iPhone DistributionCODE_SIGN_IDENTITY[sdk=iphoneos*] = iPhone Distribution

into this:

CODE_SIGN_IDENTITY = iPhone DeveloperCODE_SIGN_IDENTITY[sdk=iphoneos*] = iPhone Developer

and try to run the ios cordova build ios --release again to compile a release build.

Reference: https://forum.ionicframework.com/t/ios-build-release-error-is-automatically-signed-for-development-but-a-conflicting-code-signing-identity-iphone-distribution-has-been-manually-specified/100633/7

Step 11: Upload application to iStore from Xcode

______________

Full process:

Step 1: Request a distribution certificate

A distribution certificate identifies your team or organization.

If your team already has one and you want to reuse it, see How to share an iOS distribution certificate. Then, skip straight to the Modify the settings of your app section.

If you don’t have a distribution certificate yet, continue on with this section and we’ll help you set one up.

Start Xcode.
If you haven’t installed Xcode, see the First, install a few things onto your Mac section of the iOS setup guide.
In Xcode, add your Apple ID (If you haven’t done so already).
See Adding an Apple ID to Your Accounts.
In the menu bar, choose Xcode->Preferences.
In the Accounts page, choose the View Details button.
In the account details page, choose the Create button next to the iOS Distribution signing identity.

Looking for more information about signing identities? See Creating Signing Identities(Optional reading).
Choose the Done button to close the account details page.

Step 2: Create a distribution provisioning profile

A distribution provisioning profile lets you submit your app to the store.

On the Member Center page, choose the Certificates, Identifiers & Profiles link.
In the Certificates, Identifiers & Profiles page, choose the Provisioning Profiles link.
In the Provisioning Profiles page, choose the + button.
In the What type of provisioning profile do you need? page, choose the App Store option, and then choose the Continue button.
In the Select App ID page, choose the App ID of your app, and then choose the Continuebutton.
In the Select certificates page, select the distribution certificate that you created earlier in Xcode, and then choose the Continue button.
In the Name this profile and generate page, name your profile, and then choose the Generatebutton.
In the Your provisioning profile is ready page, choose the Download button.

Need more detail? See Creating provisioning profiles using Member Center

Step 3: Download the distribution provisioning profile

Open Xcode.
In the menu bar, choose Xcode->Preferences.
In the Accounts page, choose the View Details button.
In the account details page, choose the Download button next to your provisioning profile’s signing identity.
Choose the Done button to close the account details page.

Step 4: Modify the settings of your app

The general settings of your app appear in the Common page of the configuration designer.

The Display Name is the name that appears in the app store.
The Package Name is a string that uniquely identifies your app.
This identifier has to match the identifier of your distribution provisioning profile.

You can find the indentier of your profile by choosing your distribution profile in the Provisioning Profiles page of the Apple developer Member Center.

.
The Domain Access collection lists the domains that your app needs to access.
For example, the WeatherApp that appears in the previous image, obtains weather data from a service endpoint that has the domain https://query.yahooapis.com.

The purpose of most other settings clear from the title, but you can find more information about them here: The config.xml File.

iOS-specific settings appear in the iOS tab of the configuration designer.

You can read about each option in the preference section of the config.xml reference topic.

Step 5: Create the package

Build your app to generate the package that you will submit to the store.

On your Mac, make sure that the remote agent is running.
See Start the remote agent on your mac.
In Visual Studio, open the project for your app.
On the Standard toolbar, choose the iOS platform.
Choose Remote Device.

.
Choose the Release build configuration.
On the Build menu, choose Build Solution.
This starts a build on the remotebuild agent and uses the distribution certificate and the matching provisioning profile to build a release signed iOS Application Archive (.ipa) file.

You can find that file in the bin/iOS/Release folder of your project.

Submit your app to the store

Copy the .ipa file into a folder on your Mac.
Create an iTunes Connect Record for your app.
Use the Application Loader to upload your .ipa file to iTunes.

Apple reviews your app. If they don’t accept it, you’ll receive an email that explains the reason and what you can do to fix it. These articles describe common reasons why apps get rejected.

Common Problems

iFrame navigation

If you are using iFrames, links might open in new Safari window.The work around is described in the following post [1].

First, add the following to confine.xml

<allow-navigation href=”https://remote.zensystem.pl” iframe=”true” />

I was facing this issue for a new application I’m working now, and it seems that is related with new whitelisting mode in Cordova iOS > 6. For us, I have made a workaround for allow navigation inside iframes (I can’t be sure if it could generate any other problem, but for now we haven’t seem anyone). In cordova project, at Private/Plugins/CDVUIWebViewEngine/CDVIntentAndNavigationFilter.m, we’ve just modified the shouldOverrideLoadWithRequest:navigationType: method, changing the behaviour when a navigation is requested via UIWebViewNavigationTypeLinkClicked.

With the new Cordova behaviour, in that case it stops navigation, and open it in system browser; I’ve commented that line ([[UIApplication sharedApplication] openURL:url]; ) and modified the return, to return YES; and with this two changes it is working as previous versions of cordova.

TIP: Just search in Xcode for UIWebViewNavigationTypeLinkClicked


Create iOS icons and splashes for the application

Create splashes with: http://ticons.fokkezb.nl


References

[1] http://stackoverflow.com/questions/36572869/why-are-links-inside-an-iframe-opening-in-system-safari

Universal App with Visual Studio 2015 tools for Apache Cordova – Windows Distribution

February 6, 2017leszekj Leave a comment

Practical steps to create universal app with VS2015. Based on the oryginal post by Authored by Norm Estabrook with contributions from Raghav Katyal, Mikejo5001, rido-min,Linda Z with comments.

Package the Windows version of your app

First, decide which platforms and device families you want to make your app available to. You can make your app available to Windows Phones, desktop PCs, and tablets.

It doesn’t matter which version of Windows the app targets. The Windows store accepts all of them. That said, the operating system of a device or PC only runs apps that target the same version of that operating system or an earlier version.

To learn more about Windows package and Windows device compatibility, see OS versions and package distribution.

In this section:

Modify the settings of your app.
Make your app available to Windows Phones.
Make your app available to Windows desktop PCs or tablets.
Install your app on a device or publish it to the store.

Modify the setting of your app

The general settings of your app appear in the Common page of the configuration designer.

The Display Name is the name that appears in the app store.
The Package Name is a string that uniquely identifies your app.
Choose a naming scheme that reduces the chance of a name conflict.
The Domain Access collection lists the domains that your app needs to access.
For example, the WeatherApp that appears in the previous image, obtains weather data from a service endpoint that has the domain https://query.yahooapis.com.

The purpose of most other settings clear from the title, but you can find more information about them here: The config.xml File.

Windows-specific settings appear in the Windows tab of the configuration designer.

You might have noticed that the this page shares three of the same field names as the Common page (Display Name, Package Name, and Version).

In the Create App Package Wizard (which you’ll use later) you might have to choose a different display name or package name because of Windows-specific naming requirements, the name has already been reserved by someone else, or if you want to associate your app with a name that you’ve previously reserved.

In any of these cases, Visual Studio updates the Display Name and Package Name on the Windowspage once you’ve completed the wizard. That way your other platform targets are not forced to use those names.

The reason why this page has a Version field is because Windows uses a 4 digit version number instead of a 3 digit one. You can either modify this field directly or let Visual Studio set this field based on the version number that you choose in the Create App Package Wizard.

We’ll look at the Windows Target Version field in the next section.

Make your app available to Windows Phones

Which version of Windows does your app target? Choose a section:

YOUR APP TARGETS WINDOWS 10

In the Standard Toolbar, choose Windows-ARM.
In the Windows page of the configuration designer, choose Windows 10 from the Windows Target Version dropdown list.

.
Choose Project->Store->Create App Packages to start the packaging wizard.
Complete the wizard.
For step-by-step guidance, see Create an app package
Find your packaging files in the AppPackages folder in the root of your project.
Install your Windows app onto a device or publish it to the store.

YOUR APP TARGETS WINDOWS 8.1

In the Standard Toolbar, choose Windows Phone (Universal).
In the Windows page of the configuration designer, choose Windows 10 from the Windows Target Version dropdown list.

.
Choose Project->Store->Create App Packages to start the packaging wizard.
Complete the wizard.
For step-by-step guidance, see Create an app package
Find your packaging files in the AppPackages folder in the root of your project.
Install your Windows app onto a device or publish it to the store.

YOUR APP TARGETS WINDOWS PHONE 8

In the Standard Toolbar, choose the Release configuration.
Choose Windows Phone 8.
Choose Build->Build Solution to build your package.
Find your packaging files in the bin\WindowsPhone8\Release folder in the root of your project.
Install your Windows app onto a device or publish it to the store.

Make your app available to Windows desktop PCs or tablets

In the Standard Toolbar, choose Windows-AnyCPU.
In the Windows page of the configuration designer, choose Windows 10 or Windows 8.1 from the Windows Target Version dropdown list.

.
Choose Project->Store->Create App Packages to start the packaging wizard.
Complete the wizard and in the wizard choose which platforms you want to make your app available to.
For step-by-step guidance, see Create an app package
Find your packaging files in the AppPackages folder in the root of your project.

Install your Windows app onto a device or publish it to the store

To publish your app to the store, see Publish Windows apps.

To install your app directly onto a device Sideload your app package.

Universal App with Visual Studio 2015 tools for Apache Cordova – Android Distribution

June 15, 2016February 28, 2018leszekj Leave a comment

Practical steps to create universal app with VS2015. Based on the oryginal post by Authored by Norm Estabrook with contributions from Raghav Katyal, Mikejo5001, rido-min,Linda Z with comments.

Before starting the process, make sure that VS has the latest updates.

Create new app

Use VS2015 wizard to create blank application

Note! Make sure there are no blank spaces in the project’s location!

Package the Android version of your app

In this section:

Modify the settings of your app.
Generate a private key.
Refer to that key in a configuration file.
Create the package.

Step 1: Modify the settings of your app

The general settings of your app appear in the Common page of the configuration designer.

The Display Name is the name that appears in the app store.
The Package Name is a string that uniquely identifies your app.
Choose a naming scheme that reduces the chance of a name conflict.
The Domain Access collection lists the domains that your app needs to access.
For example, the WeatherApp that appears in the previous image, obtains weather data from a service endpoint that has the domain https://query.yahooapis.com.

The purpose of most other settings clear from the title, but you can find more information about them here: The config.xml File.

Android-specific settings appear in the Android tab of the configuration designer.

You can read about each option in the preference section of the config.xml reference topic.

Step 2: Generate a private key

To sign your app, create a keystore. A keystore is a binary file that contains a set of private keys. Here’s how you create one.

Open a Command Prompt in administrator mode.
In the Command Prompt, change directories to the %JAVA_HOME%\bin folder.
(For example: C:\Program Files (x86)\Java\jdk1.7.0_55\bin).
In the Command Prompt, run the following command.

keytool -genkey -v -keystore c:\my-release-key.keystore -alias johnS

[/code][/code][/code][/code]

```
Plain Text>Plain Text>Plain Text>Plain Text>-keyalg RSA -keysize 2048 -validity 10000
```
Replace my-release-key.keystore and johnS with names that make sense to you.[/code][/code][/code][/code]

Plain Text>Plain Text>Plain Text>Plain Text>Plain Text>Plain Text>Plain Text>You'll be asked to provide a password and the Distinguished Name fields for your key.
This series of responses gives you an idea of the kinds of information you'll provide for each prompt. Like in the previous command, respond to each prompt with information that makes sense for your app.
Plain Text>Enter keystore password: pwd123

Plain Text>Re-enter new password: pwd123
[/code]PHP>What is your first and last name?
[/code]PHP>[Unknown]= John Smith
[/code]PHP>What is the name of your organizational unit?
[/code]PHP>[Unknown]= ABC
[/code]

Plain Text>PHP>What is the name of your organization?
[/code][/code][/code]

Plain Text>Plain Text>Plain Text>Plain Text>key.alias=johnS

[/code][/code][/code][/code]

```
Plain Text>[/code][/code][/code]
```

Plain Text>Plain Text>Plain Text>Plain Text> "android": {

[/code][/code][/code][/code]

Plain Text>Plain Text>Plain Text>Plain Text>Plain Text>Plain Text>Plain Text>Plain Text>     "release": {

[/code][/code][/code][/code]

Plain Text>Plain Text>Plain Text>Plain Text>Plain Text>Plain Text>Plain Text>Plain Text>Plain Text>Plain Text>Plain Text>         "keystore":"c:\\my-release-key.keystore",

Plain Text>Plain Text>Plain Text>Plain Text>Plain Text>Plain Text>         "storePassword":"pwd123",

Plain Text>Plain Text>Plain Text> "alias":"johnS",
Plain Text> "password":"pwd123",
"keystoreType":""
}
}
}

Step 4: Create the package

On the Standard toolbar, choose the Android platform.
Choose the Release build configuration.
Choose one of the Android emulators.

.

Important: Don't choose any of the Ripple simulators. Choose only an Android emulator or the Device.
On the Build menu, choose Build Solution.
This builds a file with an .apk file extension. That is the file that you'll upload to the store.

You can find that file in the bin/Android/Release/ folder of your project.

It's the file that does not contain the word unaligned in the file name.

Submit your app to the store

You can publish your app to Google Play.

To prepare for the big day, review Essentials for a Successful App.

Then, see Upload an app to make your app avaialable to the world.

Common problems:

Add uses-permission INTERNET!!!

References:

https://taco.visualstudio.com/en-us/docs/tutorial-package-publish-readme/