Dynamically loading the correct PhoneGap.js file for Android or iPhone

I am in the process of putting together a mobile development class and have been trying to figure out the best ways to get students who are new to PhoneGap and Mobile development going on cross-platform development. One of the issues I have been trying to solve is the fact that PhoneGap apps use a different phonegap.js file on each platform. This is a problem that I do not feel is well documented and one that is not easily and cleanly solved.

Since PhoneGap applications require these different JS files I have been unable to find a good way to start building a PhoneGap application in, for example, Eclipse with the Android Development Tool as an Android project and then be able to quickly and easily switch over to XCode and launch the same application as an iOS app. I always need to go and replace the phonegap.js file with the iOS one first and then switch it back before I go back to working in Android. Not a great workflow.

I could probably solve the problem with custom build scripts. I could set up build scripts for both iOS and Android to properly retrieve the correct file and stuff it into the build prior to compilation, but this is not something I want to take the time to do in the classroom (I also don't want the students to have to worry about trying to set up ANT at home). This also prevents me from having an application that can simply be downloaded from GitHub and run without modification. It's also more code to manage. I would need to maintain X number of build scripts (one for each platform) for all of my projects. Sounds like a PITA.

So I wanted a way to dynamically load the proper phonegap.js file depending on the platform. I am hoping there is a better way (or that a better one will come along), but in the meantime this (somewhat hackish) approach seems to get the job done and allows me to run and test my applications on multiple platforms without code modification or custom build scripts.

This approach sniffs the user agent of the device and determines if it is an Android device or an iOS device and then loads the appropriate phonegap.js from a subfolder. I see no reason why it would not work for additional devices (BlackBerry, Windows Phone 7, etc) support as well.

I admit I do not like this approach, and would love to see a better one. This problem does not seem to be discussed much out there. Maybe others are not having the issue for whatever reason, but while developing it was one of the first problems I came across. Maybe I am doing something wrong.

Thanks for your comments and ideas.

Connor Middleton's Gravatar Is that what my problem has been? I have everything in subversion and it feels like everything breaks whenever I switch between the two. Now I know. Thanks Jason, and let me know if this is the path you end up taking or if something better comes along.
# Posted By Connor Middleton | 12/12/11 11:04 AM
Jason Dean's Gravatar Connor, Yes, that is probably the problem. I struggled with that several times before I figured out the need for the multiple files. Things would work fine in one, but phonegap specific stuff (like deviceready) would fail in the other.
# Posted By Jason Dean | 12/12/11 11:48 AM
Russ's Gravatar Hmm, I was under the impression that (at least with PhoneGap Build) you just had to reference phonegap.js without actually including that file, and PhoneGap would automatically include the correct javascript version when it compiled the project. I haven't tried it myself, but that makes the most sense to me. Maybe try it and see?
# Posted By Russ | 12/12/11 3:15 PM
Jason Dean's Gravatar @Russ, no such luck. At least with the way I have this set up (which is how the getting started guides describe it).

When you create a PhoneGap application in XCode it includes the iOS PhoneGap file in the source. And when you create one in Eclipse for Android you're instructed to copy the phonegap.js from the Android PhoneGap files.

I believe you are correct in the way that PhoneGap build does it, but most of us are not using PhoneGap build yet. And I don't want to have to introduce yet another dependency to this class.
# Posted By Jason Dean | 12/12/11 3:28 PM
Fil Maj's Gravatar @Jason I would recommend you try PhoneGap Build, especially if you are teaching PhoneGap. It eliminates the pain of having to set up Xcode, iOS SDKs, Android SDKs, or any other SDKs - so if anything, it reduces your dependencies.
# Posted By Fil Maj | 12/13/11 12:08 AM
Jason Dean's Gravatar @fil,

Don't get me wrong, I think that PhoneGp Build is a great tool and I have nothing against it, but I do not think it is a replacement for having the SDKs installed in a learning environment.

Correct me if I am wrong, but with PhoneGap Build you upload your source to get back compiled applications. What good are those compiled applications without an emulator to run them on? I do not require my students to have devices, so they will need emulators for testing.

Also, these are students, not experienced developers. There will be many mistakes, there will be lots of testing, there will be lots of the change-code-and-run style of development. Will they need to re-run their build every time they make their change with PhoneGap Build? That sounds like a hinderance. Plus then, even if they *did* have devices, they would then need to manually install the apps on their devices to try them out and if not then they would need to run them on the emulators.

Finally, with PhoneGap build, you need to have a developer certificate and provisioning profile for iOS. Do I then need to require my students to pay the "privilege of developing for Apple iOS" tax?

I think PhoneGap build is awesome for when your App is done and for while it needs to be maintained, but I cannot imagine using it for the development process, and i certainly can't imagine using it for the learning process.

I will definitely bring it up to the class and demo it as a great tool for them to have, but installing and using the SDKs will be a great learning experience for them and will teach them more and allow them to learn the way that I want them to.

Note that this is not a one-day training course for experienced programmers or anything like that. This is a semester-long, academically-focused, undergraduate college course. The students are there to learn to do things in several ways (both hard and easy). I feel the best way for them to learn, in the long run, is to show them how to use all of the tools of the trade.
# Posted By Jason Dean | 12/13/11 12:34 AM
Jason Dean's Gravatar @Russ

BTW, I just tried out PhoneGap Build and, indeed, you were correct, I simply needed to include a reference to phonegap.js in my index.html. It took care of adding the needed phonegap.js file to the compiled application.

Somewhat surprisingly, it was phonegap 1.1.0. I have been working with Phonegap 1.2.0. I doubt that minor difference would affect me much in what I'll be doing, but I thought it was interesting.
# Posted By Jason Dean | 12/13/11 12:43 AM
Russ's Gravatar Cool, thanks for the follow up. Idea: you could include the "hack" you wrote into a file named phonegap.js, which would at least make things a little cleaner? Then if you ever decided to use PhoneGap Build, you could just leave it out?
# Posted By Russ | 12/13/11 3:09 AM
Jason Dean's Gravatar Good idea Russ. I will try that out.
# Posted By Jason Dean | 12/14/11 9:56 AM
zeisschoice's Gravatar thank you so much!
# Posted By zeisschoice | 5/24/12 6:56 AM
Frank's Gravatar Why don't you just keep the HTML/JS files specific to your app in a third project, and just link that project into the Android and iOS projects? You could then have the platform-specific scripts in the target platform projects, renamed to "phonegap.js", and the IDE's own build processes would take care of the rest -- no browser sniffing required, and it opens up the flexibility to create other platform targets fairly quickly using a similar mechanism.
# Posted By Frank | 7/27/12 10:58 AM
Jason Dean's Gravatar @frank

Because I already have the entire www/ directory linked into the individual projects for each platform. There is not a separate www/ folder for each platform. So I cannot link in a different phonegap.js per project.
# Posted By Jason Dean | 7/27/12 11:29 AM
Alain's Gravatar Thank you.

Really helped
# Posted By Alain | 6/25/13 10:58 AM
gogoanime's Gravatar This product also features a 8ms response time which is extremely fast for HD TVs. This pretty much negates any blurring that may occur and always produces smooth and crisp motion. Watch <b><a href="http://www.gogoanime.ph/2018/01/watch-video-evil-l... OR LIVE</a></b> Live HD Tv can be wall mounted making it easy to view anywhere in the room.
# Posted By gogoanime | 1/5/18 11:52 PM
kisanime's Gravatar The Watch <b><a href="http://www.kissanime.ph/2018/01/watch-video-mamott...! LOLLIPOP</a></b> Live HD Tv has a built in tuner which allows you to listen to your favorite radio stations whenever you want. A high quality receiver connects the television to a satellite which enables you to listen to the radio. This product also features a built in sound system known as SRS TruSurround.
# Posted By kisanime | 1/5/18 11:53 PM
9animes's Gravatar 9animes has produced a great new television with many important features. The Watch <b><a href="http://www.9animes.com/2018/01/watch-video-juuni-t... TAISEN</a></b> Live HD Tv is equipped with high definition capability. This product features a high quality picture and sound system that make the viewing experience more enjoyable for you.
# Posted By 9animes | 1/5/18 11:54 PM
BlogCFC was created by Raymond Camden. This blog is running version 5.9.1. Contact Blog Owner