Open a Remote URL in PhoneGap

I wanted to open a remove website URL instead of a local index.html file in PhoneGap. Although it's possible, and has it's uses, you shouldn't submit an app that does this to Apple for approval. They are pretty likely to reject the app and, if enough developers did so, it might give PhoneGap a bad rap at Apple. Still, the trick is useful for developers to avoiding recompiling over and over again.

What I found was that you could edit the PhoneGapDelegate.m file which is located in your home folder and then Documents/PhoneGapLib/Classes/PhoneGapDelegate.m. Find the following line:

NSURL *appURL        = [NSURL fileURLWithPath:[PhoneGapDelegate pathForResource:@"index.html"]];

Change that line to:

NSURL *appURL = [NSURL URLWithString:@"http://www.example.com"];

Now PhoneGap will open that URL directly. But, it will do so in a Safari window. Probably not exactly what you're looking for.

To fix that, I decided to have all URL's that contain example.com open in the same UIWebView. I found the following bit of code:

  else if ([url isFileURL])
  {
    //NSLog(@"File URL %@", [[url scheme] description]);
    return YES;
  }

I changed that to the following code, which will allow any URL that contains “example.com” to open in the original view. Here's what I used.

  else if ([url isFileURL] || [[url absoluteString] rangeOfString:@"example.com"].location != NSNotFound)
  {
    //NSLog(@"File URL %@", [[url scheme] description]);
    return YES;
  }

Now you should have a web page working inside of PhoneGap but you don't have all the PhoneGap magic enabled yet. In order to enable all the PhoneGap API's, you'll need the phonegap.js file that matches your version of PhoneGap. You'll find that in the ./javascripts/phonegap.js directory if you've installed PhoneGap on your Mac.

Place the phonegap.js file into your web directory and then include it using something like the following in your html file.

<script type="text/javascript" charset="utf-8" src="phonegap.js"></script>

Although it's not specifically necessary, you can also build the phonegap.js file using various files in the PhoneGap download. There, the phonegap.js file is not a single file but is a series of JavaScript files that need to be combined. In the downloaded you should find a directory called core which contains those files. On my Linux machine I ran the following set of commands to combine those files into a single phonegap.js file.

cat phonegap.js.base >> phonegap.js
cat acceleration.js >> phonegap.js
cat accelerometer.js >> phonegap.js
cat camera.js >> phonegap.js
cat contact.js >> phonegap.js
cat debugconsole.js >> phonegap.js
cat device.js >> phonegap.js
cat file.js >> phonegap.js
cat geolocation.js >> phonegap.js
cat compass.js >> phonegap.js
cat map.js >> phonegap.js
cat media.js >> phonegap.js
cat notification.js >> phonegap.js
cat orientation.js >> phonegap.js
cat position.js >> phonegap.js
cat sms.js >> phonegap.js
cat telephony.js >> phonegap.js
cat uicontrols.js >> phonegap.js
cat network.js >> phonegap.js

This needs a little more work from a security standpoint. The reason it's not ideal is because someone could trick you by using a URL such as www.example.com/badcode.html?fake=example.com which would trick your app into allowing it to execute. I'm doing all this in a walled garden so my hack will work, for now.

On newer devices, the app will be paused where the user leaves off. When it does that, the page does not reload automatically. You can either close the app using the iPhone task manager (double home button) or you can add a “refresh” link to the page that links to itself.