Why HTML5 and why now?
When it comes to touch-screen mobile devices, native applications have led the way in terms of performance, speed and tighter integration to specific platforms. Unbound by the need to conform to standards, native apps could rapidly take advantage of the latest hardware and operating system innovations, while Web technologies always had to wait for the international community to agree and implement standards first. But with the HTML5 specification coming to fruition, browser-based mobile apps are rapidly catching up with the natives. Native apps, however compelling the user experience, create a plenty of challenges for developers. They are forced to create, maintain and support apps for each platform often requiring different versions of the app for variants of the same operating system. The problem is exacerbated when target users are not up to date with platform upgrades and app updates pushed via proprietary stores. The HTML5 standard is the answer from Web technologies to these rapid innovations at multiple layers, especially in mobile and handheld devices. HTML5 and related technologies provide the foundation for building responsive, sophisticated apps that can run directly within a browser, providing the same great experience of a native app. Still in draft state, HTML5 is expected to become an official W3 recommendation of Web standards by 2014. All Web and mobile browsers have been aligning themselves to HTML5 pretty aggressively for a while now. If you are a mobile app or Web developer, this has great implications for your products and now is the best time to start getting your hands on HTML5 technology.
It's all about experience and compatibility
HTML5 has some key specifications from which mobile Web apps can benefit. Here are few noteworthy ones:
1. Canvas drawing (2D Drawing API): This is one of the features widely implemented by almost all tablet and mobile browsers, this provides the ability for you app to mark off a space on a page to draw interactive pictures, charts, graphs and 2D game components without requiring the user to download any additional plugins. See the W3C spec for more details.
2. Touch events: Apps can leverage touch events in HTML5 to provide the same great interactive experience that native apps provide. By tracking touches and providing simple gesture based controls, app developers can help users quickly navigate through apps or build fun and interactive games. Supported by major mobile browsers See the W3C spec for more details.
3. Geolocation API (GPS / Cells or WiFi): Location can provide great context to your apps. You can customize and tailor the experience based on where the user is accessing your app from. This specification has been implemented by the majority of the browsers, with all the underlying hardware functionality nicely abstracted and location information available as coordinates (latitude and longitude). Usually browsers warn the user of location detection by your app, some thing to be wary of if location is not critical to your app. See the W3C spec for more details.
4. Application cache This is one of the significant additions to HTML5, which directly helps mobile app development. With app cache, apps can support offline browsing, improve responsiveness by accessing cached resources locally and reduce server load significantly by only downloading resources that have changed. Resources to be cached offline are declared in a manifest file and provisions are available to query cache status and update or invalidate the cache. For more on app cache see: Using HTML5 application cache in mobile Web apps and the W3C spec.
5. Local Storage:With local storage options, apps can persist and retrieve information locally on the client to optimize user experience, especially for mobile devices. There are few options here:
- Web Store: A simple key value store, widely supported and less complex to use, with persistence available even when the browser has been closed and reopened. You can also do session based storage i.e. data is cleared when the browser window is closed. Not a good option if you want handle large datasets or structured data.
- Web SQL Database: Though this appeals to SQL fans and developers looking for a transactional database model, this has been deprecated and most browsers will stop supporting this at some point in time.
- Indexed Database (INDEXEDDB): This is a hybrid of Web Store and Web SQL Database. It appeals to developers looking for a transactional database model, provides asynchronous API, but has a steep learning curve. Spotty browser support, but most future versions of browsers will support this.
See the W3C spec for more details.
6. Multimedia: Support for video and audio tags / players is one of the key advantages of using HTML5 over Flash. Almost all mobile browsers support this now.
How to get started in HTML5
Here are some basic examples to get you started.
Note the fallback plans. Developers should always have a fallback plan for cases when the target browser does not support a feature:
Fallback plan There is no single media format that is supported across all browsers, so you will have to encode your media in multiple formats if you want to support the full range of HTML5 compatible browsers. Further more, there are plenty of older browsers that do not support the audio and video tags. It is important to have a fallback strategy in case the audio or video tag isn't supported. The content that is nested within the audio/video tags will only be shown in the event that the audio/video tag is not supported.
b) Canvas drawing (2D drawing API): The canvas element has brought the power of graphics rendering to the Web browser without the need for Flash. Many great gaming engines have already been built on top of this new technology. The canvas is a drawing surface that allows you to render shapes and images to the area that the canvas occupies. The canvas API is extensive and extremely powerful. I'll provide a couple snippets to get started with, but this element is best learned by reading the spec and really playing around with it.
Frameworks and native bridges
While HTML5 provides a rich set of features to begin building your Web app, there are limitations and restrictions that prevent a Web app from having the full feature capabilities of native apps. These limitations can be overcome by wrapping your web app in a native app that provides a bridge to the devices native APIs. This bridge can be used to access many features that would otherwise be inaccessible to your app. PhoneGap and Apache Cordova are great examples of libraries that provide this type of functionality.