Escape the App Store: 4 ways to create smartphone Web apps

Proprietary, incompatible coding systems and app store controls can make mobile app dev too hard -- so try these HTML-oriented alternatives

Page 4 of 5

Sencha's professional touch is apparent. There are more features, more panels, more widgets, and more design options than in open source options. The documentation is also much better than many of the open source projects, but it is still not as deep as I would like; on several occasions, I found it was missing or just based on an earlier version of the code.

Similarly, Appcelerator's Titanium lets you write code in HTML, CSS, and JavaScript, and then translates it into native code, so you can create a native app out of the HTML, JavaScript, and CSS that you already know. Nitobi's PhoneGap also starts with HTML and JavaScript code, adding libraries that take advantage of native features in the popular mobile platforms. (InfoWorld has compared these tools to give you a feel for how each works.)

Delivering the app to your users via the Web
All these paths' options package your app as a bundle of HTML, CSS, and JavaScript, but they don't specify how it can be delivered to the smartphone.

The simplest approach is to place the package on a Web server and let the Internet do what it does best. If the HTML and CSS code is well-designed, the result will be almost indistinguishable from an installed app.

Apple's iOS has a nice ability to bookmark websites by turning them into icons on the home screen. The user just needs to tap the Action button when viewing a page in Safari, then choose Add to Home Screen from the menu that appears. (The Action button's icon used to be a plus sign but was recently changed to an arrow emerging from a rectangle.) You can have an app icon appear for this app on the home screen (rather than a thumbnail image of the website's page) by creating a 48-by-48-pixel or larger PNG icon file and referring to it in the Web page's header using the <link rel="apple-touch-icon" href="/iphone-icon.png" /> statement.

Likewise, Android 2.1 and later can put a bookmark on its home screen and attach what it calls a launcher icon using the same header code as iOS uses. (A sustained tap on the bookmark opens up a menu that offers the chance to add a shortcut to the home screen.)

Handling performance issues through hybrid apps
Having the entire app on the Web server means the performance depends heavily on the quality of the device's Internet connection. Thus, a Web app won't usually work well if all the parts are kept on the server.

One solution to the performance issue is to include a cache manifest, an HTML5 enhancement that specifies which parts to keep on hand. A well-designed architecture can keep all the useful parts within reach and still erase the dynamic data that's not in use.

The manifest can also be combined with local databases to store local information. This technique works with modern HTML5 browsers as well.

Another solution to the performance issue is create a hybrid app by wrapping up the HTML/JavaScript/CSS code in a native app that simply loads the HTML into a WebView. The result is an app that installs like a native app but maintains much of the same look and feel as the HTML code running in the browser. It's not always the same, but it is for most cases.

However, bundling the HTML with a native wrapper means that the wrapper must be developed in each device's native development enviroment (not a horrible burden) and the resulting app must be delivered through the traditional app store channels, with all of the pleasures and pains that they bring for developers. In the past, Apple fretted about hybrid apps like this and often blocked them, but recently it's been much more open to this development model.

| 1 2 3 4 5 Page 4
From CIO: 8 Free Online Courses to Grow Your Tech Skills
Notice to our Readers
We're now using social media to take your comments and feedback. Learn more about this here.