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.
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.
NOTES:
- 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:
Post a Comment