Question

We have an existing web app built with jQuery Mobile.

Our goal is to preserve the dynamic capabilities of a web app (i.e., changes deployed to all users immediately), yet have access to the Apple App Store through a native shell (and access other features through the PhoneGap API).

As we understand it, here are the options for embedding an existing web app (built with jQuery Mobile) into a PhoneGap app:

1) Rewrite the app to reference files (e.g., images, sounds, pages) locally (as opposed to a server) and rename the first page of the web app to “index.html.”

2) Embed an iFrame inside a simple PhoneGap app that references the web app. This requires no changes to the web app, but changing the PhoneGap configuration file to let external sources open within an iFrame and not open in mobile Safari.

3) Using jQuery Mobile inside the PhoneGap app, use $.mobile.changePage immediately after “index.html” loads and load the webapp. This avoids iFrames.

Any other options? Could anyone share their experiences with these approaches? Any drawbacks to any of them?

Thanks!

Answer 1

You need to:

1. Reference the phonegap.js
2. name your first file index.html
3. Configure Orientation, and the different view modes, and the device services used in the application in a configuration file
4. Ready to go

Even if you do not reference the files locally, the app will go and fetch the remote static files (it’s a WebKit view ..) and so there is no need for an iFrame either.

JQuery mobile works fine with Phonegap, there do not step on each other’s foot so no worry on this side.

Edited:

A good bit of configuration is done in a file named PhoneGap.plist.
This is where

1. you enable disable some PhoneGap features,
2. set the list of hosts to handle within PhoneGap or Safari
3. Declare additional PhoneGap plugins you want to include in the application