HelloWorld in PhoneGap/Cordova Plugin – Step by Step Guide

Creating a HelloWorld application is the classic first step for developers exploring hybrid mobile development using PhoneGap/Cordova. While PhoneGap has been widely used for cross-platform apps, it is now deprecated, and developers are encouraged to use Capacitor or modern frameworks.

This guide on javatechig.com explains how to create a simple HelloWorld app with PhoneGap/Cordova, while highlighting modern alternatives and best practices.

Why PhoneGap/Cordova HelloWorld?

• Learn core hybrid app workflow
• Understand HTML, CSS, JavaScript integration for mobile
• Explore plugin system for accessing native device features
• Serve as a foundation before migrating to modern frameworks

Note: Adobe officially ended support for PhoneGap in 2020. Consider Capacitor for production apps.

Step 1 – Install PhoneGap/Cordova

Prerequisites: Node.js installed on your system.

Install Cordova Globally

npm install -g cordova

Verify Installation

cordova --version

Step 2 – Create HelloWorld Project

cordova create HelloWorldApp com.example.helloworld HelloWorld
cd HelloWorldApp

• HelloWorldApp → project folder
• com.example.helloworld → app ID
• HelloWorld → app display name

Step 3 – Add Platform

For Android:

cordova platform add android

For iOS:

cordova platform add ios

iOS requires macOS and Xcode installed.

Step 4 – Run the App

Android

cordova run android

iOS

cordova run ios

This will build and launch the app on an emulator or connected device.

Step 5 – Modify HelloWorld Content

Edit www/index.html:

<h1>Hello World from PhoneGap!</h1>
<p>Welcome to your first hybrid app.</p>

Refresh the app in emulator/device to see changes.

Step 6 – Using Plugins (Optional)

PhoneGap/Cordova supports native features via plugins. Example: device info plugin.

cordova plugin add cordova-plugin-device

Usage in JavaScript:

document.addEventListener('deviceready', () => {
  console.log('Device Model: ' + device.model);
});

Many plugins are now outdated; for modern projects, use Capacitor plugins.

Modern Alternatives to PhoneGap

Since PhoneGap is deprecated:

Migrating from PhoneGap to Capacitor is straightforward and ensures long-term maintainability.

Best Practices (2026 Updated)

• Use PhoneGap only for legacy maintenance
• Prefer Capacitor for new hybrid projects
• Always handle permissions and platform-specific differences
• Test on both Android and iOS emulators
• Keep the HelloWorld app minimal before adding plugins

Summary

This tutorial covered:

• Setting up PhoneGap/Cordova
• Creating a HelloWorld app
• Adding platforms and running the app
• Using plugins and modifying content
• Modern alternatives for hybrid app development

Even if PhoneGap is legacy, understanding it helps in maintaining older apps and provides context for modern hybrid frameworks.