Phonegap is a platform that allows you to build mobile apps.

Specifically, you can build hybrid mobile apps that use web technologies, and turn those into a ‘native’ app that can be submitted to the iOS and Android app stores. That means you essentially build a static website with HTML, Javascript, and CSS, and Phonegap can turn that into an app.

It is an incredibly useful and mature platform, and it’s used by almost everyone doing hybrid app development. We use it for our Reactor apps, along with the Ionic Framework.

There’s some confusion around how Phonegap works, and it definitely has it’s quirks. I’m going to explain it in a way beginners can understand in this article.

How Phonegap Works

Phonegap allows you to build a native app the same way you build a website.

This is great because web technologies are much easier to work with, and more people know how to use them. Using Phonegap means that a good web developer can create a mobile app without learning difficult new coding languages (Objective C and Java).

Developers can use javascript to connect to native device technologies such as the camera, contacts, and push notifications.

An example Phonegap project would have an index.html file, a style.css file, and a scripts.js file in a folder. The app is built the same way as a website, using special javascript APIs to use device features like the camera.

The project is then compiled using Phonegap to add all the native app code and turn it into an app that can be installed on a device or submitted to the app stores. This is done automatically by Phonegap through the command line, or Phonegap Build.

If you want to get technical, Phonegap uses a webview inside a native app to make this all work. Phonegap is a bridge between native code and javascript to make everything work. Webviews are used in many popular native apps, but Phonegap uses a webview exclusively.

How to use Phonegap

I won’t go over building the actual app files, since the process is different depending on what you are doing. Here are a few external links for that:

• Build a tip calculator in Phonegap
• Getting started with Ionic
• Phonegap apps with no coding: Reactor

After you have your files ready to go, here are a few different ways to compile your app using Phonegap.

Command Line

If you are comfortable with the command line, it’s the fastest way for developers to work. You install the CLI tools, then use commands like phonegap create and phonegap build ios. Learn how to setup Phonegap for the command line here.

You’ll need to have XCode and/or Eclipse/Android Studio setup to simulate and compile your app. It can be a pain to get this all setup, there’s a bit of a learning curve.

Things to keep in mind:

• You have to add all phonegap plugins manually for every project. ($ cordova plugin add…)
• Phonegap and Cordova CLI commands are usually interchangeable, I’d recommend using Cordova CLI instead of Phonegap. Cordova seems to be more reliable.
• Dealing with iOS certificates in Xcode is a pain.
• Eclipse sucks. Good luck.

If you are using Ionic, they have their own CLI tools that do everything Phonegap does plus more.

Phonegap Build

Phonegap Build is an online service that compiles your app without using the command line.

It provides a visual interface for building your apps, and makes the process much less painful. You just upload a .zip file of your project, and it compiles the app for you, along with a QR code you can scan to get the app onto your device.

You can add a config.xml file with your project that has your app name, ID, plugins, splash screens, and other elements. You can set a lot of preferences in this config.xml file, it’s very handy. Learn more about the Phonegap Build config.xml file here.

I’d highly recommend you take this route if you are a beginner. Here are some things to keep in mind:

• The Phonegap CLI and Phonegap Build are not interchangeable. Config.xml elements like plugin preferences are used differently, and the app behaves differently under certain circumstances.
• Phonegap CLI has a bunch of extra folders for platforms and such, you only need one folder for Phonegap Build with your files inside. Don’t upload a Phonegap CLI project to Phonegap Build.
• You must upload iOS certificates before you can get your app on a device. Android does not have this requirement.
• Android must be built with a signing key before submitting to Google Play.
• Phonegap Build versioning is different that Phonegap versioning. Just use the latest version of Phonegap Build and you’ll be fine.
• Phonegap Build is not updated with newest plugins and Phonegap versions right away. This can be a problem if there’s a major bug that you need fixed.

Rebuilding apps is a slow process with Phonegap Build, so if you are debugging, it can be a pain. Using the CLI for a local build is faster, but in general Phonegap Build is more hassle free.

Confusing Names

There are some confusing parts of Phonegap, including the way they chose to name things.

Cordova/Phonegap

You may have heard of Cordova, which is essentially the same thing as Phonegap.

If you aren’t a developer, you really don’t need to pay attention to this, but basically Adobe donated Phonegap to Apache to make sure it always stayed open source. Apache renamed the project to Cordova, but nothing really changed except the name. Now Phonegap “uses” Cordova, which makes things really confusing.

Phonegap puts it this way:

“PhoneGap is a distribution of Apache Cordova. You can think of Apache Cordova as the engine that powers PhoneGap, similar to how WebKit is the engine that powers Chrome or Safari.”

You can use Cordova and Phonegap interchangeably for the most part.

Phonegap Build

We talked about Phonegap Build a bit already, but just to make sure it’s clear: Phonegap is the code, Phonegap Build is an online service that compiles your code into an app that can be tested on a device or submitted to the app stores.

Here at Reactor, we automatically connect your account to Phonegap Build, so that you can easily compile your app without messing with any code.

Native vs. Hybrid

You’ll hear the term ‘native’ getting thrown around a lot.

Native usually refers to an app that is coded in Objective C (iOS) or Java (Android) and doesn’t exclusively use a webview. Native can also just mean an app that is on the app stores.

Hybrid refers to an app that uses a webview to display app content along with some underlying native code, which is what Phonegap does. Technically Phonegap apps should be called hybrid, not native.

Some people get really fussy about the use of the term ‘native,’ but really, who cares?

There’s an ongoing debate about whether hybrid is as good as native. You’ll hear all kinds of different opinions, here’s my take. Native is better, but much more costly and time consuming to develop and maintain, to the point where it’s usually not worth it. (If you have the time and money, or you are building the next Twitter, go native. Otherwise, hybrid is awesome.)

Hybrid is WAY better than it was even a couple of years ago, due to better device technology, and frameworks like Ionic that are raising the bar. Hybrid is easier to build and maintain, and it is almost indistinguishable from native if done well. There is no reason not to make your next project a hybrid app.

Why this matters to you

Understanding the platform you use for your apps is important, it can help you avoid costly mistakes due to your own confusion.

Whether you are a developer, or you are going to hire a developer to make your app, you can make an informed decision for your project. Phonegap is a great platform to build on, and it is only getting better.

What’s your advice to beginners? Tell me in the comments.