Preparing Apps For Release

Before we can distribute the app through the Apple App Store and/or Google Play Store, we’ll need to devote some time towards preparing the following:

• The config.xml command (if using Ionic Native/Apache Cordova)
• Launch icons
• Splash screens
• Asset compression
• Code optimizations (previously discussed here)

Let’s look at each of these in-depth, understand why they’re important, and what changes we might need to make before app distribution.

The configuration file

Located at the root of the Ionic app, the config.xml file contains global and platform-specific configuration values used to control different aspects of the app’s behavior.

These behaviors can include splash screen settings, URLs the system can open, Cordova plugins to be restored during app preparation, and defining the app’s starting page.

Typically when working with the config.xml file, we’ll focus on the following elements:

• The widget id element, a reverse domain-name style identifier for the app. This must match the bundle ID we use when code signing your app.

• The widget version element, the version number for the app, or 1.0.0.

• The name element is the formal name for the app as it’s displayed in App Store listings and on the device home screen.

• The description element is metadata about the app that may appear in App Store listings.

• The author element is contact information for the app developer, which includes website and email addresses.

These are located towards the top of the file, like so:

<widget id="com.saintsatplay.blahdeblah" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
  <name>Animator</name>
  <description>Saints at Play demonstration app.</description>
  <author email="info@saintsatplay.com" href="http://www.saintsatplay.com">Saints at Play Limited</author>

This, however, is only a small part of what a developer might need to configure in their app’s config.xml file (and, to be honest, will probably be all that we ever need to amend in this file).

Additionally, Apache Cordova provides the option to configure preferences and elements on a platform-by-platform basis within the config.xml file using the <platform> and <preference> tags.

For example, if we wanted to target Android devices:

<platform name="android">
  <preference name="KeepRunning" value="false"/>
  <preference name="LoadUrlTimeoutValue" value="10000"/>
  <preference name="InAppBrowserStorageEnabled" value="true"/>
  <preference name="LoadingDialog" value="My Title,My Message"/>
  <preference name="ErrorUrl" value="myErrorPage.html"/>
  <preference name="ShowTitle" value="true"/>
  <preference name="LogLevel" value="VERBOSE"/>
  <preference name="AndroidLaunchMode" value="singleTop"/>
  <preference name="DefaultVolumeStream" value="call" />
  <preference name="OverrideUserAgent" value="Mozilla/5.0 My Browser" /> 
  <preference name="AppendUserAgent" value="My Browser" />
</platform>

Further information on config.xml file configuration settings can be found at the online Cordova documentation.