Cordova app resources

You need certain resources as part of your Cordova app. In most cases, they are generated for you when you create your Cordova app with your preferred Cordova development tools. If you use the IBM MobileFirst™ Platform Foundation template, then splash screens and icons are also provided.

You can use a project template that is provided by IBM® for use with Cordova projects that are enabled to use MobileFirst features. If you use this MobileFirst template, the following resources are made available to you as a starting point. If you do not use the MobileFirst template, all of the resources are provided except splash screens and icons.

You add the template by specifying the --template option and the MobileFirst template when you initially create your Cordova project. For more information about using this template, see Creating a new Cordova app with the MobileFirst template.

If you change the default file names and paths of any resources, you must also specify such changes in the Cordova configuration file (config.xml). In addition, in some cases, you can change the default names and paths with the mfpdev app config command. If you can change names and paths with the mfpdev app config command, it is noted in the section about the specific resource.

Cordova configuration file (config.xml)

The Cordova configuration file is a required XML file that contains application metadata and is stored in the root directory of the app. The file is automatically generated when you create a Cordova application. You can modify it to add custom properties by using the mfpdev app config command. For more information about this file, see The Cordova configuration file.

Main file (index.html)

This main file is an HTML5 file that contains the application skeleton. This file loads all the web resources (scripts and stylesheets) that are necessary to define the general components of the application and to hook to required document events. You can find this file in the <your project name>/www directory.

You can change the name of this file with the mfpdev app config command.

Thumbnail image

The thumbnail image provides a graphical identification for the application on the MobileFirst Operations Console. It must be a square image, preferably of size 90 by 90 pixels.

A default thumbnail image is provided when you use the template. You can override the default image by using the same file name with a replacement image. You can find thumbnail.png in <your project name>/www/img.

You can change the name or path of this file with the mfpdev app config command.

Splash image

The splash image is displayed while the application is being initialized.

If you use the MobileFirst default template, splash images are provided. These default images are stored in the following directories:
  • iOS: <your project name>/res/screen/ios/
  • Android: <your project name>/res/screen/android/
  • Windows: <your project name>/res/screen/windows/
Various default splash images are included that are appropriate for different displays, and for iOS and Windows, different versions of the operating system. You can replace the default image that is provided by the template with your own splash image, or add an image if you did not use the template.

When you use the MobileFirst template to build your app for the Android platform, the cordova-plugin-splashscreen plug-in is installed. When this plug-in is integrated, the splash images that Cordova uses are displayed instead of the images that are used by MobileFirst. The images in the folder with the screen.png format are the Cordova standard splash images. You can specify which splash images display by changing the settings in the Cordova config.xml file.

If you do not use the MobileFirst template, the default splash images that are displayed are the images that are used by the MobileFirst plug-in. The file names of the default MobileFirst source splash images are in the form splash-string.9.png.

For more information about using your own splash images, see Adding custom splash screens and icons to Cordova apps.

Application icons

Default images for application icons are provided with the template. These default images are stored in the following directories:
  • iOS: <your project name>/res/icon/ios/
  • Android: <your project name>/res/icon/android/
  • Windows: <your project name>/res/icon/windows/
You can replace the default image with your own image. Your custom application image must match the size of the default application image that you are replacing, and must use the same file name. Various default images are provided, appropriate to different displays and operating system versions. For more information about using your own icon images, see Adding custom splash screens and icons to Cordova apps.

Stylesheets

The app code can include CSS files to define the application view.

The stylesheet files are located in the <your project name>/www/css directory, and are copied to the following platform-specific folders:
  • iOS: <your project name>/platforms/ios/www/css
  • Android: <your project name>/platforms/android/assets/www/css
  • Windows: <your project name>/platforms/windows/www/css

Scripts

Your app code can include JavaScript files that implement various functions of your app such as interactive user interface components, business logic, and back-end query integration.

The JavaScript file index.js is provided by the template, and is located in the <your project name>/www/js folder. This file is copied to the following platform-specific folders:
  • iOS: <your project name>/platforms/ios/www/js
  • Android: <your project name>/platforms/android/assets/www/js
  • Windows: <your project name>/platforms/windows/assets/www/js