Web To Mobile

Table of Content

OPTION 1: Use PhoneGap Build

PHASE 1: Create A Web Site
PHASE 2: Create Debug Version
PHASE 3: Add Assets & Config File
PHASE 4: Digitally Sign App
PHASE 5: Create Release Version
PHASE 6: Upload App

OPTION 2: Use PhoneGap Desktop

PHASE 1: Create A Web Site
PHASE 2: Install PhoneGap Desktop
- Window Installation
- Mac Installation
PHASE 3: Install PhoneGap
Developer App (Optional)
PHASE 4: Create Stub App
PHASE 5: Add Web Site
PHASE 6: Convert To App

OPTION 3: Use PhoneGap CLI

PHASE 1: Create A Web Site
PHASE 2: Install PhoneGap CLI
PHASE 3: Create A Stub App
PHASE 4: Add Web Site
PHASE 5: Convert To App

OPTION 4: Use Android Studio

PHASE 1: Create A Web Site
PHASE 2: Install Android Studio
- Window Installation
- Mac Installation
PHASE 3: Create A Stub App
PHASE 4: Add Web Site

BONUS: Create App and View Browser

Install Node.js and Cordova
Create Project
Install Cordova/Phonegap Plugin
Create App

Introduction

Instead of learning how to program in a native mobile app language (e.g., Java/Kotlin for Android or Objective-C/Swift for iOS), you can create simple apps using standard web technologies (e.g., HTML, CSS, and JavaScript). In 2015, designer Frances Berriman and Google Chrome engineer Alex Russell coined the phrase Progressive Web Apps (PWAs) to describe this new trend.
These apps look like traditional apps that attempts to combine features offered by most modern browsers with the benefits of a mobile experience. These hybrid apps (web pages within a mobile app) are made possible because of the following:

Enhanced web technologies (e.g., HTML5, CSS3, and JavaScript)
Responsive Design (e.g., Flexbox, Grid)
More capable web browser standards (e.g., Local Storage, geolocation, service workers, and web app manifests)
Faster processors (e.g., A10 and Snapdragon 821)
Mobile friendly JavaScript frameworks (e.g., jQuery Mobile, Bootstrap, or AngularJS)
Ease-to-use app tools (e.g., PhoneGap Build, PhoneGap Desktop, PhoneGap CLI, Android Studio, XCode, etc.) to create assets (key stores, graphics, code, etc.)

The biggest advantage of PWAs is the cost saving due to lower app development and maintenance cost which may be up to 10 times smaller than native apps [14]

EXCEPTION: The major reason that you may want to create a native app using Java or Swift is if you are creating a game or graphic intensity app that you need the performance.

Ways To Create An App

We will examine four (4) options to convert a standard web site to a mobile app:

OPTION	LEVEL
Use PhoneGap Build	Beginner
Use PhoneGap Desktop	Intermediate
Use PhoneGap CLI	Advanced
Use Android Studio	Expert

NOTE: There are dozens of other ways and tools available to create mobile apps:

Ionic, React Native, Como, etc.
Progressive Web Apps (PWA)
Android Studio with HTML, CSS, and JS
Android Studio with Java or Koltin
xCode with Objective-C or Swift

Resource Links

How to Convert A Web Site into a Mobile App

How to use HTML, CSS, and JS and convert it to a Moble App