Designing for Universal Portability
From the moment the second operating system came into being, developers have been looking for a way to write their code once and have it run on every operating system in existence. When Java came into being, it did so with the hopeful promise of "write once, run everywhere." More than a decade later, Java has clearly not achieved this lofty goal and has failed to reach a critical mass of installed applications. Fast forward to the present day and there is only one platform on the planet that can run on Windows, Mac, Linux, iOS, Android, Windows Phone, and even Blackberry. That platform of course is installable HTML5.
Start with the Chrome Packaged App
Initiating your development of a highly portable HTML5 installed application as a Chrome Packaged App has a number of benefits. By starting your cross-platform app as a Chrome Packaged App your app will be more secure, better discipline will be enforced in your design and debugging will be backed by the best tools in the industry.
Adhering to tighter security restrictions from the beginning will insure a more secure application. Chrome Packaged Apps disallow multiple forms of potentially unsafe code from utilizing eval and other methods of loading dynamically unchecked code. PhoneGap doesn't enforce this restriction but complying with it from day one will insure that your app is ready to run everywhere.
Simple Responsive Design
A good, solid, modern responsive design is critical to creating a cross platform installed HTML5 app. If you want your UI to look great on any device and any screen size, start with simple, clean, structural HTML. Next, add CSS that can enhance your page to look great on small screens and older less capable browsers first. Then add sophisticated media queries to make your app look slicker and take advantage of bigger screens.
By targeting the least capable devices first with your CSS, you will be able to render on devices that don't understand media queries. By putting your more advanced CSS hidden carefully behind media queries you insure these instructions are only seen by more modern browsers that know how to read these rules.
Seperate Out the Platform Specific Pieces
In order to access these resources, it is recommended to create a separate JS file for each platform you want to target that provides a common interface to access these native resources.
Chrome Packaged Apps, Firefox Marketplace Apps, Windows Store Apps and PhoneGap all have different APIs for accessing native operating system resources past a certain line. All of these environments support the standard HTML5 API but have different APIs for requesting access to and getting a file handle pointing to non-sandboxed disk locations. This means you need to abstract out how the user picks a file outside of the sandbox but you can utilize the standard HTML5 file API to actually read, write and close the file.
Likewise the way you store key/value application data needs to be abstracted between platforms. Some support IndexDB, some support localStorage and Chrome supports chrome.storage.sync. They are both the same and different enough that you can interact with an abstraction layer but not so much the same that you can interact with them directly.
Chrome is the ideal platform to start building your cross platform installed HTML5 application. You can get up and running in minutes and get access to the Chrome Web Store. With careful planning, you can then take your app and recompile it to run on every kind of mobile device and operating system.
About the Author:
David Talbot has over 14 years of experience in the software industry and specializes in building rich UI web applications. He is also the author of Applied ADO.NET and numerous articles on technology. He can be reached at firstname.lastname@example.org