18 September 2012

Using a desktop shim with a PhoneGap app

  I wanted to look at some sample PhoneGap apps code but the cost of setting up an Android/iOS shell project seemed a bit high. Sure it is worth for a real app but if you just want to play around with code and after you paid it a couple of times you start to think "it has to be a better way". And ... wait for it ... there is.

  The key was the search for "phonegap shim". This brings back a couple of GitHub repos but some of them look stale. One that looks fresh and juicy is  jxp/phonegap-desktop - it even has a wiki. Yay.

  The PhoneGap code that I wanted to poke around was for a jQuery Mobile sample app EmployeeDirectory created by Christophe Coenraets. The intended use of this app is within an Android/iOS project that has the PhoneGap integration already configured. But what happens if I drop the phonegap-desktop folder in the app folder and replace the phonegap.js link in the index.html with a link to phonegap-desktop.js? ... suspense, gasps of awe ... and (some) results.

  Not all the way there yet : an error occurs when you try to access resources that are referenced with the "file://" scheme rather than the "http://" one. You can fix this by either serving all resources through a web server(... remember we are on a time budget here) or temporary enable an interesting command line switch in Chrome called allow-file-access-from-file(unsecure and dangerous and totally unrecommended ... but solves my problem fast and cheap).

  After these tweaks I was able to run the EmpployeeDirectory app on my desktop with minimal configuration while modifying and viewing my changes very quickly - no emulators hurt or used in the process.
  Of course all this can be found in my fork of the EmployeeDirectory app here .
You just need to open index.html in Chrome and the app will be alive.
Kudos to jxp and ccoenraets that made this possible.


  • alternatives for "phonegap-shim" are : phonegap-proxy which comes with some dependencies and Ripple which is more of a browser based emulator.
  • The command line for the Google Chrome switch is "Chrome --allow-file-access-from-files" for Windows and "/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --allow-file-access-from-files" for Mac.

No comments: