Stupid PhoneGap Tricks – loading external content
Most PhoneGap apps are built so that the HTML/JS/CSS content is bundled into the app (see my previous blog post). I wondered if it was possible to load external content into the PhoneGap container, and after a few minutes of looking at the APIs, I discovered that it is doable, at least on Android (I’ll try iOS later, but if you are reading this and already know how to do it on iOS, please comment).
Simply modify the main Java Class of your PhoneGap Android project and set the loadInWebView property to true – then simply load your content using http:// instead of file://. If you try using http:// without setting the loadInWebView property, it will open the page in the device’s browser and your code won’t have access to the device APIs.
For example:
package com.gregwilson.gregpg1;
import com.phonegap.*;
public class GregPG1Activity extends DroidGap {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
super.setBooleanProperty("loadInWebView", true);
super.loadUrl("http://somewebsite/index.html");
//ORIGINAL--> super.loadUrl("file:///android_asset/www/index.html");
}
}
Since the web content is loaded and executed in the PhoneGap container, you can use any PhoneGap JavaScript APIs you desire just as if the code was loaded from the device. A few thoughts:
- This could actually speed up parts of the development workflow because now I can simply modify the HTML/CSS/JS and reload the page (once I add a reload button!). It avoids having to deploy the app over and over.
- This opens up a huge security hole. Imagine if someone could hack your web server and inject some new JavaScript. Since the JavaScript executes on the device, in the PhoneGap container, it could easily extract or delete your contacts, determine your location and many other devious things. Therefore, I would NOT recommend doing this for anything other than testing.
- There might be some interesting hybrid apps where some of the content is sourced from the server while other content is on the device, but I’m fairly sure this would not be a “best practice” without further code changes to avoid the security issues.
- Assuming this is possible on iOS, I’m fairly certain that your app could be rejected since you are loading external code (a no-no in iOS-land).
I’m not a PhoneGap expert (yet!), so feel free to correct me. I’m basically blogging as I learn!
Great write-up. I have been using a modified version of the ChildBrowser Plugin to display external js but this is much cleaner!
This trick isn’t that stupid,…the hybrid app approach is pretty common…recommended in-fact.
Facebook/Google/etc.. are all using the hybrid approach–where external js can execute (probably a subset) of native functionality.
Hey Nick – can you give me any more specifics on Facebook/Google? Which apps? Anything I can read about and possibly quote?
Thanks!
Greg
Talk on HTML5 Development (Mobile) at Facebook.
– http://www.livestream.com/f8socialapps/video?clipId=pla_e174c0e5-4d1d-4ca1-a4af-23edb3b9e616
You can find out a lot about Google’s Mobile Apps from their Google IO videos:
– http://www.youtube.com/watch?v=4f2Zky_YyyQ
– http://www.youtube.com/watch?v=vV85dNeGRhY
I hope these resources are useful~!
These videos are fantastic – thanks! I’ve shared them with a few folks internally too.
Greg
The code works great for initial page loading, however if I have my app start at file:// and then have a link to an external page in my app using this code, will that work? I tried it already and the app seems to ignore the request when starting in file://
I ran into the same problem. It seems that if you start with file://, all subsequent pages must be file://, and if you start with http://, you have to stay with http://.
BUT – if you use the ChildBrowser plugin (you’ll find it at https://github.com/phonegap/phonegap-plugins), you can mix and match.
Now I load the file:// URL as usual, and use the following to load external content into the container: window.plugins.childBrowser.openExternal(“http://mywebsite”, true);
The “true” param will enable the remote content to have phonegap API calls.
Greg
Any luck with this on iOS? I can’t seem to find anywhere to set a loadInWebView property to true. And the iOS version of ChildBrowser doesn’t seem to support openExternal. I was able to open an external URL with window.plugins.childBrowser.showWebPage but the content doesn’t seem to respond to any PhoneGap commands then. Any ideas?
Thanks!
and how can i change the css of the page with a custom one?
I am also learning phonegap , and still not clear on how this works. index.html calls phonegap.js file in which phonegap.exec() is called to do the required actions (calling native code). My question is where is this native code present and how phonegap.exec() contacts the native code (Android). After the app is build the .apk file is about a size of some 140KB . So what are the contents of this apk file , and why phonegap.jar is used.I could not find any connecting link between phonegap.js file and phonegap.jar. Please clear me on this.
I badly need an answer
Hi,
Interesting post…unfortunately I have some doubts about taking advantage of the phonegap api as the javascript file is different for each plateform. Meaning that, in cross plateform developement you would have to identify the device to link the good javascript file.
What do you think?