I wanted to create an application which I could use to run my other PhoneGap applications for testing, a kind of wrapper or shell application. When you are developing a PG application, you are changing you code frequently and running the application again and again in the emulator could be time consuming (actually it is very slow for Android, but iOS is quite fast).
So this week I create a PhoneGap application which can take a URL of my PhoneGap application hosted on my development server and run it. The shell application is like a regular web browser where you enter the URL to open the page. However you cannot execute PhoneGap applications in a regular mobile browser (such as Safari and Chrome) because PhoneGap specific native libraries are not available.
So I can now create my PhoneGap applications, deploy it on a web server and open the link in my PhoneGap shell application. If I modify the application, I just refresh the page in the shell application. So testing is faster.
But the usefulness of this application is not just limited testing. It could be used as a client to PG mobile web applications, hosted on server in enterprise. You could create a home page of applications and open that page in the PG shell application. You can now have mobile web applications that can access Camera, Contacts, Files etc. of user’s mobile, using PhoneGap APIs. And adding new application or modifying application is simple, because you just add/update the application on your server and it is available immediately to users.
Here are the things you need to be aware of if you want to develop such application –
Separate cordova.js file for different platforms
Note : You need to be concerned about this only if you intend to test/support multiple mobile platforms.
When you create a PhoneGap application using the command line utility, it creates a project with cordova.*.js. The file name is same on Android and iOS (and possibly others too). But they are actually different JS files for each platform. The use-case I am talking about in this post requires you to host cordova.*.js on a server. You need to make sure that you host corodva.js on your server for all platforms you want to support.
So how does your web application know which corodva.js to load? I can think of two easy ways
- When you request a URL from the shell application, pass a URL parameter indicating which platform the application is going to run on. Then in your web (PG) application. load the platform specific cordova.js dynamically.
- Detect browser agent (HTTP_USER_AGENT) from the HTTP header request on the server (you will need an application server). The value of this header field contains text that can give you a hint about the mobile OS from where web request is coming. Then, as in #1 above, load appropriate cordova.js dynamically.
Same PhoneGap version on client and server
This might seem obvious, but I will state it anyway. You need to make sure that you include the version of cordova.js on the server (your web application), same as the one with which the shell application is created. For example, if the shell application is created with PhoneGap 2.5 then you need to include cordova.js of the same version.
PhoneGap applications do not work in frames
Once the web application is loaded in the shell application, I wanted to provide options to load other application urls, reload the page and go back to previous page – the basic browser options. So I though I would create buttons for these options in the shell application and load web application URL in an iFrame in the same page.
However I realized that PhoneGap does not fire deviceready event when the page is loaded in iFrame. Even using framesets did not work.
I worked around this problem in Android shell by providing application specific menus. However iOS does not support application menus. So in iOS it becomes the responsibility of web application to provide these (navigation) options, if they are required.
However if you type a wrong URL in the shell application, you will get ‘page not found’ error, then the only way to re-enter URL in the shell application in iOS is to kill the app and start again. In Android this is not an issue because the shell application provides application specific menu options to re-enter the URL.
-Ram Kulkarni
Ram, don’t forget you have access to the Device API which gives you an easy way to detect platform. I’d use that in option 1 in the skeleton app and pass that to the other PG app.
But Ray, we want to detect the platform before cordova.js is loaded, in fact we want to detect platform to determine which version of cordova.js we need to load. And device APIs would be available only after cordova.js is loaded.
And if you are suggesting that we load cordova.js in the native (skeleton) app also and use device API to get platform name, then I think that may not be necessary. You will have to create skeleton apps for each mobile OS and in each one you could just hardcode OS name (for which that application was created) in the URL parameter. That is what I suggested in the first option.
Have you tried the Ripple extension for Chrome? I’ve found it quite good for testing PhoneGap apps 🙂
Yes, I use Ripple extension quite a lot. It is a fantastic tool. But I use is mainly to step-debug my application, not so much for testing.
And I found that this extension does not support PhoneGap 2.5 (I believe it supports up to version 2.0 only, but I might be wrong).
I don’t think it is exactly 2.0 as they support the globalization API and even let you mimic another locale. It definitely *says* 2.0 in the drop down of course.
Ram, what I meant was this. Your first app, let’s call it the Skeleton, would have to be platform specific – let’s say one iOS and one Android one. It would use the Device API and then load in your remote app. When it loads the remote app, it passes a URL variable indicating which to load.
On those apps, you read in the URL var and use something like Require.js to get the right cordova.js for your platform.
Ray, when you are building a skeleton app for iOS, you know what OS it is. In that application if you want to call a url and pass OS name as a parameter, then you don’t need PhoneGap API, you already know what OS it is. For example, in my skeleton app for iOS, after I get application URL from user, I just append ‘?os=ios’ (or ‘&os=ios’) to it. I don’t need PhoneGap API for this.
True, that was kinda dumb then. So… yeah, your skeleton justs sends the OS to the other app, and the app loads up the right cordova.js using Require.js. Right?
Yes, that’s right.
I just use PhoneGap Build and Hydration. Then I automate my build process so that all I have to do is run an ant script to package and upload my latest changes to PGB, wait for the compile, and then run the application on my phone in order to get the latest version.
I want to do the same thing. I’ve got an ASP.NET application on a remote-server, but I want to add some native features so I decided to build an app with PhoneGap to extend my application. My question for you know is, how do you load your application from a remote server? I tried with building an easy PhoneGap app, that only inlcudes index.html and I added the following code line to index.html :
document.location.href = “myapp.aspx”;
Did you do it the same way? I’m very curious.
P.S. I also wanted to ask whether a app like that would pass the app store?
If you provide an option to type URL and load pages from server, then I don’t think it would be passed by the app store. However if you are loading your pages from a fixed url (which user cannot modify), then I think it might pass. In that case it would be similar to number of existing apps that load content from remote servers. However I have not submitted such app to the app store, so not very sure.
Yes I did the same. I also set the value of document.location.href
Hi Ram thanks for the article we are using cordova 2.5 and load the cordova.js from a remote server. We are able to invoke the inappbrowser in case of Android but on iOS we see that it is not loading the cordova.js library and does not work as expected.