Developing Portable Mobile Web Applications
If you want to package a Web application for distribution on iTunes or Android Market, one way is to use the appropriate SDK and write a small wrapper application. The application creates a browser Intent (Android) or a UIWebView (iPhone) and gives it the location of index.html. We don't have room to go into the SDKs here, but the applications are literally a few lines of code.
Or, for iTunes, you can let a package like PhoneGap do the work for you. You still need the iPhone SDK, so you have to create the package on a Mac, but PhoneGap makes the process simpler. Once it's created, you can upload it to iTunes like any other iPhone app.
If you don't care about iTunes or Android Market, there's another way—package your application as an HTML5 Offline Application. Listing 3 is a manifest file, webnotes.manifest, that you put in the home directory of your application. You also need to add an attribute to the <html> element in index.html:
manifest="webnotes.manifest"
One more thing—if you're serving the files from an Apache Web server, the .htaccess file in your Web directory needs a line like:
AddType text/cache-manifest .manifest
This tells Apache to serve .manifest files with the correct MIME type. When a user first goes to the Web site, the server will download the files listed in the manifest and keep them on the device. On subsequent visits, the file will be reloaded if the manifest changes—even if the change is in a comment field.
Listing 3. webnotes.manifest
CACHE MANIFEST index.html icon.png jqtouch/jqtouch.min.css themes/jqt/theme.min.css jqtouch/jquery.1.3.2.min.js jqtouch/jqtouch.min.js javascript/webnotes.js
On Apple devices, when users go to your Web site, they can touch + at the bottom of the browser to put an icon for that URL on their homescreen (remember that .icon attribute when we initialized jQTouch?). If you've created an off-line application, it loads and executes from local storage, much like a native application.
We defined Webnotes to be similar to an example application that comes with the Android SDK called NotePad. See Table 1 for a comparison of lines of code.
Table 1. Comparing Lines of Code
| NotePad | Webnotes | |
|---|---|---|
| Java | 672 | |
| XML | 50 | |
| HTML | 62 | |
| JavaScript | 121 | |
| Source Lines | 722 | 183 |
If the effort to write a line of code is about the same in any language, it would take about a fourth of the time to write the application as a Web application—and it runs on most mobile WebKit-based browsers. That's worth considering as you plan your next mobile application development.
Resources
Canalys 2009 Smartphone Market Analysis: www.canalys.com/pr/2010/r2010021.html
AdMob Mobile Metrics for January 2010: metrics.admob.com/wp-content/uploads/2010/02/AdMob-Mobile-Metrics-Jan-10.pdf
Comparison of Layout Engines (HTML5): en.wikipedia.org/wiki/Comparison_of_layout_engines_(HTML5)#cite_note-114
Dive into HTML5's Site to Check for HTML5 Features in Browsers: diveintohtml5.org/past.html
What's My User Agent?: whatsmyuseragent.com
jQTouch: www.jqtouch.com
PhoneGap: phonegap.com
iWebkit: iwebkit.net
Jon Stark's excellent book on Building iPhone Apps with HTML, CSS and JavaScript: building-iphone-apps.labs.oreilly.com
Rick Rogers has been a professional embedded software developer for more than 30 years (FORTRAN to JavaScript). He's currently a Mobile Solutions Architect at Wind River Systems. He welcomes feedback on this article at portmobileapps@gmail.com.
Rick Rogers has been a professional embedded developer for more than 30 years. Now specializing in mobile application software, when Rick isn't writing software for a living, he's writing books and magazine articles like this one.
Realizing the promise of Apache® Hadoop® requires the effective deployment of compute, memory, storage and networking to achieve optimal results. With its flexibility and multitude of options, it is easy to over or under provision the server infrastructure, resulting in poor performance and high TCO. Join us for an in depth, technical discussion with industry experts from leading Hadoop and server companies who will provide insights into the key considerations for designing and deploying an optimal Hadoop cluster.
Sponsored by AMD
Built-in forensics, incident response, and security with Red Hat Enterprise Linux 6
Every security policy provides guidance and requirements for ensuring adequate protection of information and data, as well as high-level technical and administrative security requirements for a system in a given environment. Traditionally, providing security for a system focuses on the confidentiality of the information on it. However, protecting the data integrity and system and data availability is just as important. For example, when processing United States intelligence information, there are three attributes that require protection: confidentiality, integrity, and availability.
Learn more about catching the bad guy in this free white paper.
Sponsored by DLT Solutions
Web Development News
Developer Poll
| Designing Electronics with Linux | May 22, 2013 |
| Dynamic DNS—an Object Lesson in Problem Solving | May 21, 2013 |
| Using Salt Stack and Vagrant for Drupal Development | May 20, 2013 |
| Making Linux and Android Get Along (It's Not as Hard as It Sounds) | May 16, 2013 |
| Drupal Is a Framework: Why Everyone Needs to Understand This | May 15, 2013 |
| Home, My Backup Data Center | May 13, 2013 |
- Evernote is much more...
41 min 28 sec ago - Reply to comment | Linux Journal
9 hours 26 min ago - Dynamic DNS
10 hours 54 sec ago - Reply to comment | Linux Journal
10 hours 59 min ago - Reply to comment | Linux Journal
11 hours 49 min ago - Not free anymore
15 hours 51 min ago - Great
19 hours 38 min ago - Reply to comment | Linux Journal
19 hours 46 min ago - Understanding the Linux Kernel
22 hours 1 min ago - General
1 day 31 min ago








Comments
Android compatibility.
I'm getting my feet wet with mobile development and am trying to get this working. I'm developing on an HTC Droid Eris with Android 2.1. All I'm getting is a black screen. Any one have any ideas if it should work? Or where I should be looking?
"well documented elsewhere"
"Installation of the tools is well documented elsewhere. The Resources section for this article gives pointers to the download URLs."
The resources indeed gives the pointers to the download URLs.
Is there also a link available for "well documented elsewhere"?
Is there also a pointer to the installation of the tools?
Regards,
M. Moon