Introduction To PhoneGap

PhoneGap:

PhoneGap is a framework for quickly building a cross-platform mobile application.

It has been developed by Adobe System…

…and further taken care of by Apache group with a new name Apache Cordova.

It is completely free and open source for use.

PhoneGap Apps are written in HTML5 ,CSS3 and  Javascript.

Apache Cordova is the core of the backend and erstwhile known as PhoneGap.

It has a bounded performance because of hybrid nature of Apps.

---

Nature of Apps?

While developing the mobile application, we generally see two kinds of application which are listed below:

Native App:-

These are the dedicated application for a specific operating system.

If you want to use any apps then you have to choose a specific app store.

For example, An App developed for Window can only be accessed by Windows users and is developed using Java, C#, C++ etc.

whereas iOS applications are developed using XCode/Objective-C etc.

This is a very expensive and very time consuming as complete development process happens for a specific app store at a time.

Hybrid App:-

These are the latest HTML5 apps.

The biggest advantage of developing a hybrid app is consistent, cross-platform UI that is compatible with most devices.

This is less expensive app development method but cannot be used for every type of app.

Difference between PhoneGap and Cordova:

Both Apache Cordova and PhoneGap are frameworks for mobile application development.

Apache Cordova is a platform for building native mobile applications using HTML, CSS, and JavaScript.

PhoneGap is an HTML5 app platform that allows you to author native applications with web technologies and get access to APIs and app stores.

Cordova makes sure that it works on all Android Smartphones. You need a Mac and Cordova to wrap it up for iOS.

PhoneGap makes sure that it works on all iOS and Android Smartphones. PhoneGap build services let you allow to do it.

---

Platform Guides:

PhoneGap is compatible with all possible platforms(OS) like:

• Android
• iOS
• Blackberry
• WebOS
• windows phone
• Symbian
• Bada.

It allows you to run your Apps on any of these operating system.

Note: It can be a probability that your Apps does not run on any of these listed OS because of version change, either of PhoneGap or OS(platform) or other compatible issues. so keep yourself updated with the latest version.

Supported Features:

---

File Structure:

---

Hooks:- 

Hooks are nothing but an action in programs or scripts  that executes various times in build process.

We have approx thirty-two different hook types, few of them are listed below.

• Before_Prepare
• After_Prepare
• Before_Build
• After_Build

Example: For removal of a temporary file from a project before build process.

Plugins:-

Cordova plugins provide an interface between a web view, empowering a Cordova…

…application and the native platform where this Cordova application is running.

Generally Plugins are poised of a single JavaScript interface used across all platforms, and…

…native implementations following platform-specific Plugin interfaces that the JavaScript calls into.

Example: Camera, Battery, Console, Contacts plugins etc.

Config.xml:-

This file contains the scripts which are used in building the hybrid application.

Icons & Splash Screens:

Icons are simply a logo image which helps us to identify a specific application

A splash screen is a graphical control element consisting of a window containing an image, a logo and the current version of the software.

A splash screen usually appears while a game or program is launching.

Icons Size for PhoneGap Android Application:-

• 192px (xxxhdpi)
• 144px (xxhdpi)
• 96px (xhdpi)
• 72px (hdpi)
• 48px (mdpi)
• 36px (ldpi)
• 512×512 pixel – only used in Android Market; resized to various sizes

Icons Size for PhoneGap iOS Application:-

• 57 px, iPhone
• 72 px, iPad
• 114 px, iPhone 4 Retina Display
• 144 px, iPad 3 Retina Display
• 1024 px, iTunes – Used in iTunes and in the App Store sized down to 175px
• 29 px, iPhone Settings/Spotlight, iPad Settings – used in these table views. Minor, but still important!
• 48 px, iPad Spotlight
• 58 px, iPhone 4 Settings/Spotlight
• 64 px document icon
• 320 px document icon

Icons Size for PhoneGap Windows Application:-

Home Screen:

• 62px, small application tile
• 173px, large application tile
• 48px, application bar icons

Windows Phone Marketplace:-

• 99px, small mobile app icon
• 173px, large mobile app icon
• 200px, PC app title icon
• 480x800px, details page screenshot
• 1000x800px, panorama background
• 480x800px, application splash screen

Splash Screen Sizes for phonegap android applications:- 

• LDPI:
  • Portrait: 200x320px
  • Landscape: 320x200px
• MDPI:
  • Portrait: 320x480px
  • Landscape: 480x320px
• HDPI:
  • Portrait: 480x800px
  • Landscape: 800x480px
• XHDPI:
  • Portrait: 720px1280px
  • Landscape: 1280x720px

Splash Screen Sizes for phonegap ios applications:-

• Tablet (iPad)
  • Non-Retina (1x)
    • Portrait: 768x1024px
    • Landscape: 1024x768px
  • Retina (2x)
    • Portrait: 1536x2048px
    • Landscape: 2048x1536px
• Handheld (iPhone, iPod)
  • Non-Retina (1x)
    • Portrait: 320x480px
    • Landscape: 480x320px
  • Retina (2x)
    • Portrait: 640x960px
    • Landscape: 960x640px
  • iPhone 5 Retina (2x)
    • Portrait: 640x1136px
    • Landscape: 1136x640px
  • iPhone 6 (2x)
    • Portrait: 750x1334px
    • Landscape: 1334x750px
  • iPhone 6 Plus (3x)
    • Portrait: 1242x2208px
    • Landscape: 2208x1242px

Splash Screen Sizes for phonegap Windows applications:- 

• Portait: 480x800px
• Landscape: unsupported

Conclusion:

This post would definately have helped you in understading the basic concept about PhoneGap/Cordova. Here you would have learned about PhoneGap supported features, PhoneGap file structure, Icons, Splash screen etc.

We will keep you an update regarding the same, so keep in touch & keep reading our blogs. Don’t forget to share your valuable feedback with us from space provided below.

Recommended blogs –

• PhoneGap GPS / PhoneGap Geolocation Plugin
  
• PhoneGap Local Storage