Mobile Development with Cordova (Phonegap): Chapter 4

Chapter 4: Stuff We Always Do

This article describes several tasks that we do on every single application, and which you will likely do as well. Consider it a continuation of Chapter 3 where we created a project.

Plugins

We tend to develop for the same platforms every time, and there's a certain subset of plugins that we use in every single project.

cordova platform add ios
cordova platform add android
cordova plugin add org.apache.cordova.file
cordova plugin add org.apache.cordova.file-transfer
cordova plugin add org.apache.cordova.geolocation
cordova plugin add org.apache.cordova.network-information
cordova plugin add org.apache.cordova.splashscreen

Tip: The console plugin allows console.log() to log to the app console, which is useful in iOS when you have the device attached via cable. I don't use it much, though, since most of my development and debugging is via weinre.

Tip: The vibration plugin breaks the app compilation on iOS. Don't bother.

Xcode Setup: iOS

Open the project's xcodeproj file, located under platforms/ios This will launch Xcode.

Select the project (left sidebar, make sure the folder icon is picked, then the project is the first item on the list) then the Info settings.

Deployment Info:

• Select yourself as the Team.
• Select appropriate entries for Device Orientation, typically all 4.
• For Status Bar Style, select Hide During Application Launch.

Info:

• Custom iOS Target Properties:
• Status Bar is initially hidden: Set to YES
• View controller-based status bar: Set to NO

Icons and Splash Screens: Android

Tip: See also http://cordova.apache.org/docs/en/edge/config_ref_images.md.html

Look in platform/android/res and you'll find drawable folders for various screen resolutions (e.g. drawables-xhdpi), plus the default with no specific resolution (drawables).

Swap in the icons with new PNGs.
These PNGs should be RGBA (24-bit plus alpha channel) and the vogue these days is rounded corners.
The sizes of these PNGs are as follows:

default -- 32 x 32
ldpi -- 32 x 32
mdpi -- 48 x 48
hdpi -- 72 x 72
xhdpi -- 96 x 96
xxhdpi -- 144 x 144

You can also place an image named splash.png into each of these subfolders too, and it will act as the splash screen as the app starts and loads. These should be high quality PNGs, of the following sizes:

ldpi -- 426 x 320
mdpi -- 470 x 320
hdpi -- 640 x 480
xhdpi -- 960 x 720
xxhdpi -- 1410 x 960

Edit config.xml and add these two lines, to show the splash screen for 3 seconds (3000 ms).

<preference name="SplashScreen" value="screen" />
<preference name="SplashScreenDelay" value="10000" />

Lastly, you may need to do a clean in order to have the new versions detected:
./platforms/android/cordova/clean

Tip: The splash screen time stated in the config.xml should be the maximum before the platform hides it, but your app can hide it whenever it's ready. Good practice is to explicitly call navigator.splashscreen.hide() in your program during the onDeviceReady event handler, so it doesn't keep showing the splash screen any longer than necessary.

Icons and Splash Screens: iOS

Look in platforms/ios/PROJECTNAME/Resources and you'll see the icons and splash folders.

Just start replacing images with your own. For the splash screens they should simply be high-quality RGB PNGs, while icons are high-quality PNGs with alpha channel (RGBA) and rounded corners.

splash/Default-568h@2x~iphone.png   640x1136
splash/Default-Landscape@2x~ipad.png   2048x1496
splash/Default-Landscape~ipad.png   1024x748
splash/Default-Portrait@2x~ipad.png   1536x2008
splash/Default-Portrait~ipad.png   768x1004
splash/Default@2x~iphone.png   640x960
splash/Default~iphone.png   320x480

icons/icon.png             57 x 57 
icons/icon@2x.png          114 x 114 
icons/icon-40.png          40 x 40 
icons/icon-40@2x.png       80 x 80 
icons/icon-50.png          50 x 50 
icons/icon-50@2x.png       100 x 100 
icons/icon-60.png          60 x 60 
icons/icon-60@2x.png       120 x 120 
icons/icon-72.png          72 x 72 
icons/icon-72@2x.png       144 x 144 
icons/icon-76.png          76 x 76 
icons/icon-76@2x.png       152 x 152 
icons/icon-small.png       29 x 29 
icons/icon-small@2x.png    58 x 58 

Lastly, you may need to do a clean in order to have the new versions detected:
./platforms/ios/cordova/clean

iOS: Disable Cloud Storage

Our apps tend to be based on maps, and on storing map tiles. Apple terms allows only user-generated documents to be backed up, and require that we disable the automated backup of map tiles (as well as downloaded database files, LocalStorage and WebSQL content, etc). However, Cordova only allows us to turn backups on and off globally; we cannot pick and choose that some files are backed up. So, disable the cloud backup as follows:

- Open up platforms/ios/APPNAME/config.xml
- Look for the key BackupWebStorage
- Change it from cloud to none

Android: Allow App to Resume

Problem: By default, Android apps will run a new instance whenever you open it. If you open the app and get it into some state (say a search has been performed, your map centered), then switch to some other app (e.g. check your text messages), then come back... you start the app over again, complete bwith splash screen, losing your previous state. That's a useless app!

Solution: Change a default setting in the Android Manifest file, stating a "single task" launchMode.

• Edit the file platforms/android/AndroidManifest.xml
• Look for the <Activity> declaration, which you'll see also defines other params about your app, e.g. android:name="YourAppName"
• Add this attribute:   android:launchMode="singleTop"

Now (after a rebuild) the Android app will behave in the proper way and will resume when you come back to it, without losing your place.  (and why this isn't the default we'll never know)