Friday, August 19, 2011

Including an optimized Dojo build within a PhoneGap app

In my last post, I showed how to create an optimized build of the Dojo Toolkit.  An optimized build contains the exact pieces of Dojo needed by your app, with nothing extra.  I served my app and the optimized Dojo from an Apache web server, and saw that it downloaded really fast.

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:


I modified the contents of index.html to point to the buildtest.html file created previously...

  <body bgcolor="yellow" >
  <h2>from assets/www/index.html</h2>
      <li><a href="buildtest.html">optimized dojo build</a> 

I copied the three files and directories created from the optimized build into the PhoneGap directory:


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.


No comments:

Post a Comment

Note: Only a member of this blog may post a comment.