HTML5 is a feature rich specification and it breaks the traditional
browser model. It allows developers to code their application very differently.
It is emerging as a paradise for developers and they don’t have to rely on
external plugins to integrate rich features. Here is a list of interesting
features and techniques which HTML5 brings to the browser stack.
·
Canvas
- <canvas> element allows the browser to render bitmap and it opens a new
dimension to the browser. One can render graphs, visual images, game graphics etc.
The canvas is not a plain tag but API so one can leverage and draw shapes under
the defined rectangle.
The
developer needs to make a simple check to see the browser is supporting it or
not by following simple call.
test_canvas =
!!document.createElement('canvas').getContext
If test_canvas is “true” then the browser is supporting it and one can
start leveraging it. API for canvas includes shapes, patterns, gradients, text
etc. It supports 2d and 3d context as well. Canvas is a very powerful feature
of HTML5 and widely getting used across applications and web sites.
·
Video
- <video> element with the API is a key component of HTML5. It is the
need of the time and in today’s world information is being converted into
videos and gets circulated around. “CODEC” is a language for video and it
converts it into streams which browser can process. HTML5 supports video
formats and no external player or library is required to play them in HTML5
browsers. One needs to check which CODEC is supported before initiating the
play calls.
document.createElement("video").canPlayType(‘----type----‘);
·
HTML5
storage – This is key feature added in HTML5 which allows user to store
domain/site specific storage within the browser. It is like cookie which gets
stored on browser storage stack and can be retrieved and used on anywhere on
the DOM/page. It stays locally on the machine and can be accessed by
JavaScript. It can be detected by using window
['localStorage'], if it’s not null then browser supports storage and
developer can use it across an application or domain. This is the very
interesting domain from a security perspective.
·
Web
Workers – It allows browser to run some process in the background. The
browser can code up a component in JavaScript and run it in the background.
Hence, now we have a feature by which multiple threads can spawn off through a
page and different activities can be carried out within the browser. For
example, bringing mail, doing math processing, making network calls, and
accessing Web storage and so on. Everything can happen seamlessly in the
background and user will not notice these activities. This is a very powerful
feature to build industrial strength applications within the browser using
HTML5. We can check the support by following simple call.
test_worker=!!window.Worker;
We
get “true” for above call and start implementing our threads through the worker.
·
Offline
application support – HTML5 allows to cache pages within the browser. An
application can make a list of pages and those pages get cached on local
browser. These pages are getting loaded from the client itself and save network
calls. Also, users can read those pages while offline and not connected on the
Internet. This feature allows to store mails, documents etc. for offline usage.
Any application can provide offline usage and no need of special
functionalities like google gears or google offline support. The application
can force any type of file for caching on browser like video, JavaScript, HTML
etc. The developer can use following call to determine offline support.
test_offline = !!window.applicationCache;
·
Geolocation
– Geolocation allows to determine your position on globe and can be used by
application to localize the page. If you are from New York right now then you
get apple shops nearer to you by leveraging geolocation. Geolocation can be
fetched by your IP, wireless connection, mobile tower or dedicated GPS hardware
if available. HTML5 call determines latitude and longitude from underlying call
and passes it to the application. Following call gives a quick availability of
the feature within the browser.
test_geolocation =!!navigator.geolocation
·
Web Forms
& Input – HTML5 is having enhanced web forms which include various data
types (email, URL, time etc.), place holder, auto focus, sliders, spinbox,
pickers etc. It allows user to submit data easily and developer can use these
controls to craft effective forms. Also, the form allows built in validation
for those types as well.
·
History
API – History API supports APIs like pushState and it allows navigating
through browser history during the brower’s life cycle. HTML5 API controls its
value and can feed across iframes as well.
Following call gives an availability of the feature within the browser.
test_history =!!history.pushState
·
Web
Sockets – HTML5 allows pure TCP duplex connection through Web Socket APIs. The
web Socket call has several key APIs which can open same origin or cross origin
socket and start communication channel. Sockets can be controlled within the
browser through JavaScript and APIs like “send” can be used. Also, the schema
handler like ws:// being used for back channel communication. Following call
gives an availability of the feature within the browser.
test_ws=!!window.WebSocket
·
File
System API – HTML5 application can create a virtual file system on sandbox
with a specific domain. On the system either temporary or permanent files can
be created. Few APIs and blob are supported to create any type of files and
directory. These files can be consumed during the application life cycle and
allows power feature for developers. Following call gives an availability of
the feature within the browser.
test_fs=!!(window.requestFileSystem ||
window.webkitRequestFileSystem)
Above is a limited list of features, HTML5 supports several
more features in the current version and others are in pipe for future
specifications. Features like IndexedDB, Web Messaging, Drag-Drop, XHR (level
2), Contacts API (microdata), File APIs etc. In a nutshell all these features
and more provides a powerful platform for developers to create thick client
applications which can run in any native browser without any plug-in support.