Today I wondered if the same optimized build technique could be used in a hybrid mobile app created with the PhoneGap framework. PhoneGap lets you build installable mobile apps where your app's content is written in HTML and JavaScript instead of each phone's proprietary language. I had written hybrid apps which fetched Dojo from the Google CDN, and it worked fine. But each time an app started, it had to download Dojo from the CDN. That took time and bandwidth. My goal was to include Dojo with my app, and see if it loaded instantly.
To my pleasant surprise, the optimized build worked exactly as expected. Here is what I did...
First, I found an existing 'HelloPhoneGap' project for Android. (You can create one from scratch using the instructions at Getting Started for your favorite mobile platform.) The entry point for your app in a PhoneGap build environment is an index.html file within an assets/www directory. For example:
.../HelloPhoneGap/assets/www/index.html
I modified the contents of index.html to point to the buildtest.html file created previously...
<!DOCTYPE HTML>
<html>
<head>
<title>PhoneGap</title>
</head>
<body bgcolor="yellow" >
<h1>HelloPhoneGap</h1>
<h2>from assets/www/index.html</h2>
<ul>
<li><a href="buildtest.html">optimized dojo build</a>
</ul>
</body>
</html>
I copied the three files and directories created from the optimized build into the PhoneGap directory:
.../HelloPhoneGap/assets/www/buildtest.html
dojo/dojo.js
my/app.js
Then I compiled, installed, and started the app. It worked out of the box.
When I started the app, the index.html file appeared.
I clicked the link to jump to the optimized dojo build page, buildtest.html. The alert popped up:
After clicking 'OK', I got the version information.
Amazing.
No comments:
Post a Comment
Note: Only a member of this blog may post a comment.