PhoneGap Explained in 5 Minutes
Even though PhoneGap has been around for nearly four years, it is the source of a great deal of confusion by many who have not work with the framework. In order to clear up some of the confusion, I have written this short document.
What is PhoneGap?
Per PhoneGap.com, "PhoneGap is an open source solution for building cross-platform mobile apps with standards-based Web technologies like HTML, JavaScript, CSS." It is important to understand, that a PhoneGap app, runs on a device, not on the web. All of the components of the app, the HTML, CSS, and JavaScript files are on the device. While it is possible for a PhoneGap app to pull user interface from the web, this is not the norm. In general, PhoneGap apps, like other types of mobile apps, use the web only to download and upload data. This is the most prevalent PhoneGap misconception. Many people think that a PhoneGap app is simply a canned website, it is not. While some websites can essentially be lift from the web and placed into a PhoneGap app, most can't. In general, PhoneGap apps are purpose built.
PhoneGap and the App Store
No disrepect, meant to Windows Phone or Blackberry, but mobile has become a two horse race between Apple and Android. Since the Google Play Store doesn't have any overly restrictive requirements, let's talk about Apple's App Store.
Since PhoneGap version 0.8, apps built with it have been accepted into the App Store. They must meet all the requirements that other iOS apps must meet. You should read all of the Apple Store Review Guidelines, but here are some important ones:
- 2.1 Apps that crash will be rejected
- 2.8 Apps that download code in any way or form will be rejected
- 2.12 Apps that are not very useful, unique, are simply web sites bundled as Apps, or do not provide any lasting entertainment value may be rejected
- 2.17 Apps that browse the web must use the iOS WebKit framework and WebKit Javascript
- 10.3 Apps that do not use system provided items, such as buttons and icons, correctly and as described in the Apple iOS Human Interface Guidelines may be rejected
While PhoneGap apps are not able to use the system provided icons, its icons must have a similar look to Apple's, for example you can't use a screwdriver to represent settings, since in standard iOS it is represented by a "gear".
The guidelines also clearly state that you can't download code in any form and that your app can't simply be a web site bundled as an app. So if your plan is simply to create an app which is a link to a web site, you may have trouble passing review.
What does PhoneGap source code look like?
A PhoneGap apps source code has four main sub-directories: www, merges, plugins, and platforms. "plugins" is for your PhoneGap plugins. "www" is where your core code goes. It contains the HTML, CSS, and JavaScript of your app. By default PhoneGap will launch your apps index.html file, but you can make this any HTML file you would via configuration. "platforms" is where the "www" code goes after it is built for each platform you are supporting.
And finally there is the "merges" folder, this is where all of the files which are platform specific go. For example, suppose you would like for your app to look iOS-ish on iOS devices and Android-ish on Android devices. You would create different CSS files for each platform with the same name, say "style.css". In "merges/ios" you would place the iOS version of styles.css and in "merges/android", you would place the Android version of styles.css. When PhoneGap builds your app. It will copy the platform specific version of styles.css to the platform directory. In this way, your app can achieve the device appropriate look and feel without resorting to inline device detection.
What does the build command build?
It is assumed by PhoneGap, that you have already installed the development environment for each platform you wish to support. This means that for iOS development, you must be running on a Mac and have Xcode and iOS SDK installed. Similarly for Windows Phone, you must be on a PC, have Visual Studio and the WP8 SDK installed. Android development can be done on just about any system, but you still need to have the Android SDK installed.
When the command line build command is executed all it does is create the appropriate source code files for each platform. From there you complete the build the process using the platforms development tools. Android is currently the lone exception. It also has the run command. Which when used after the build command will actually compile the code and deploy it to either the Android emulator or an attached device.
In summary
PhoneGap allows you to create cross platform mobile apps using web technologies. It is not a tool for converting websites into apps. While it is easier for web developers to build mobile apps with PhoneGap than to develop them using native tools it is not turnkey or simple. PhoneGap apps require the same level of detail that all well developed apps deserve.
Resources
PhoneGap
Apple App Store Review Guidelines
Apple Human Interface Guidelines
