The first article in this series looked at the alternatives to native app development for smartphones and highlighted HTML 5. This article will look at some of the technologies available.
Technologies
The overview below showcases some of the technologies available in the new standard and what they can be used for.
- Geolocation - this allows the user's location to be used within the web app, for example showing your location on a map.
- Local storage - permits simple data structures to be stored within the browser and retrieved. This could be data such as a list of favourites, user login or cached data.
- Webworkers - this allows non-instantaneous tasks that might freeze the browser to run in the background - such as downloading and parsing something from a server or processing a large image.
- Web sockets - this allows more efficient network connections between a browser and server for quicker apps and slicker user experience.
- Canvas - allows graphics drawing on a web page which enables showing things like graphics, animations, drawing apps, simple games and the like.
- CSS 3.0 - allows for better designed apps with a slicker appearance. Allows things like text shadows, rotation and styling as well as use of gradients.
- Device (camera) - allows capture of images from a device's camera
- Touch events - with obvious relevance to touch screen devices, this allows touch and multi-touch actions to be detected.
- Audio/video - media playing within the browser.
- Application cache - permits a web app to be stored within the device so it can be used when offline as well as making apps snappier to load and use.
- Meta tags - used by Apple's mobile safari browser to specify the width of content, whether the app is full screen, the colour of the status bar and home screen icons.
Adoption in browsers
Adoption of these standards is somewhat fragmented and spotty. Browsers based on "WebKit" which include Safari on desktop and mobile as well as Chrome and the Android browser are generally the most advanced in terms of support with Internet Explorer noticeable in it's lag to support them.
The table below outlines the support by browser.
To give an idea of penetration of the various browsers: -
| Technology | Browser | ||||||||
|---|---|---|---|---|---|---|---|---|---|
| Mobile | Desktop | ||||||||
| iOS | Android | Blackberry | Windows Phone 7 | Symbian | Safari | Chrome | Firefox | Internet Explorer | |
| Geolocation | 3.0 | 2.0 | 6.0 | x | x | 5.0 | 5.0 | 3.5 | x |
| Local storage | 3.0 | 2.0 | 6.0 | 7.0 | x | 4.0 | 4.0 | 3.5 | 8+ |
| Webworkers | x | 2.0 | 6.0 | x | x | 4.0 | 3.0 | 3.5 | x |
| Web sockets | 4.2 | x | x | x | x | 4.0 | 4.0 | 4.0 | x |
| Canvas | 1.0 | 1.0 | 6.0 | x | v2 | 3.2 | 6.0 | 3.0 | x |
| CSS 3.0 | 3.0 | 2.0 | (partial) | x | x | varies | varies | varies | x |
| Device (camera) | x | 3.0 (tbc) | x | x | x | x | x | x | x |
| Touch events | 2.0 | 1.0 | 6.0 (different gestures) |
x | x | n/a | n/a | n/a | n/a |
| Audio/video | 1.0 | 2.0 | x | x | x | 4.0 | 6.0 | 3.5 | x |
| Application cache | 2.0 | 2.0 | 6.0 | x | x | 4.0 | 4.0 | 3.5 | x |
| Meta tags | 2.0 | n/a | n/a | n/a | n/a | n/a | n/a | n/a | n/a |
- iOS - 99% of iOS devices are 3.0 or greater
- Android - 87% of 2.1 or greater
- Blackberry - only Blackberry Torch currently supports 6.0
In the next article in this series, we'll ask the question - why go native?
- Part 1 : Tech Spotlight: Native v HTML 5 apps
- Part 2 : Tech Spotlight: HTML 5 technologies
- Part 3 : Tech Spotlight: Why go native?
Comments (0)
Leave a comment...