Advanced HTML5 Tutorials – Client Side, Offline, Geolocation – Part I

Last modified on by Karthikeyan K

Before we get started, lets take a minute & will tell you about HTML5.

HTML5 helps us to build sites that are Easier to Develop, Simple to Maintain & More User Friendly. They has new elements for defining site structure & embedding content, which means we dont have to include any extra markup or other plug-ins.

It also offers Offline Support, that help us to start building working applications that don’t need an internet connection.

Its improved accessibility support will improve Ajax applications for people with disabilities. Also it is very easy to build rich web applications & incredible things with the help of Web SQL databases, Geo Location & Web Sockets.

Advanced HTML5 Techniques - Storage, Offline, Geolocation


  1. Rich Multimedia – You don’t need flash or silverlight for video, audio & graphics
  2. Better Applications
  3. Cross Document Messaging – Talking Across Domains
  4. Web Sockets – Sending messages & data across domains
  5. Client Side Storage – Store persist data entirely on client machine
  6. Better User Friendly Forms – Email, URL, Telephone, Slider, Number, Date, Color, Placeholder, Autofocus & In-place Editing Support etc
  7. Improved Accessbility – Attributes like Role, aria-live & aria-atomic etc

Getting Started with HTML5

If you know HTML or XML, then you have come across the doctype declaration. It is used to help browser to determine how web browser will render the page & how the document should be formed.

Place the below HTML5 doctype code in the top of the document. That’s it you are using HTML5

<!DOCTYPE html>

1. Working with Client-Side Data

HTML5 introduced new options for storing data on the client machine.

  • Web Storage ( localStorage or sessionStorage )
  • Web SQL Databases.

The above two options are easy to use, powerful & reasonably secure than cookies.

Now a days many sites sending requests to server to save user data, but with these new storage options, user data could be stored locally & backed up when necessary


Stores data in key/value pairs, tied to the domain & persists across browser sessions

To work with this method, you need little javascript code to access the window.localStorage() object

Below code is used to set a name & value pair using localStorage mechanisam

localStorage.setItem("name", "Karthikeyan");
localStorage.setItem("website", "");

Getting a value back is very easy. below code is used to achieve that.

var client_name = localStorage.getItem("name");
var website_name = localStorage.getItem("website");

Detecting HTML5 localStorage support in your web browser is very simple.

if(window.localStorage) {
//html5 Storage
} else {
//cookie storage

2. Offline Data Access

Using HTML5 offline support, we can use HTML & other related technologies to build applications that can still function while disconnected from the internet connection.

These kind of features are really useful for developing mobile applications that may drop internet connections.

This feature works on latest web browsers as well as on iOS & Android devices

Caching with Manifest

The manifest file, it contains a list of all the web application’s client side files that need to exist in the client browser’s cache in order to work offline

Create a file called notes.manifest.  Place the file paths that you want to access it via offline


Next, we need to link the created manifest file to our HTML document. We can do this by changing the HTML element like this

<html manifest="notes.manifest">

Then, we should tell our web server to serve this manifest file using the text/cache-manifest MIME type.

If your web server is apache, then place this code in your .htaccess file to serve the manifest file

AddType text/cache-manifest .manifest

After requested 1st time, the files listed in the manifest file get downloaded & cached. We can start disconnect the internet & use our application offline as many times as we want.

3. GeoLocation

Geolocation is a technique for discovering where people are, based on their computer’s location.
It uses computer’s IP address, MAC address or wi-fi hotspot location if available.

Visitor should allow browser to grab visitor’s latitude & longitude.

We need to detect support for Geolocation before we try to get visitor’s location like this

//html5 geolocation code
} else {
// ordinary google map code using their API

How to get visitor’s current location

Below code is used to get visitor’s latitude & longitute co-ordinates

navigator.geolocation.getCurrentPosition(function(position) {
showLocationMap(position.coords.latitude, position.coords.longitude);

Then showLocationMap() function take the latitude & longitute values as parameters & constructs the image.

function showLocationMap(lat, long)
var parameters = "&markers=color:red|label:You|"+lat+","+long;
var image_div = $("#map");
var source = image_div.attr('src')+parameters;
source = source.replace("sensor=false", "sensor=true");
image_div.attr("src", source);

When we execute this code in the browser, we will see our location, marked with a “You” label.

4. Preventing Autocompletion

HTML5 introduces an autocomplete attribute that tells web browsers that they should not attempt to automatically fill in data for the field or entire form

Example 1

This code will turn off auto-completion in entire form fields

<form method="post" action="" AUTOCOMPLETE="off">

Example 2

This will turn autocomplete feature in the desired field

<form method="post" action="">
<input type="text" name="email" AUTOCOMPLETE="off" value="">
<input type="text" name="name" value="">

5. Cross Domain Messaging

Client-side web applications always been restricted from sending/getting data from other servers/domains.

But In HTML5, there’s a better way 🙂 They introduced Cross-document Messaging, an API that makes it possible for scripts will communicate with other scripts hosted on different domains/servers.

For example, If you want to submit the data from to & retrieve the content from vice versa. you need this approach to make this fast.

Posting the Message

When a user submits the form, we will grab the datas & post a message back to the parent window. The postMessage() function takes two parameters: the data & the target window’s origin.

$("form.submit").click(function(event) {
var name = $("#input_name").val();
var origin = "";
window.parent.postMessage(name, origin);

Now we need a page that will hold this frame and receive its response.

Receiving the Messages

The onmessage event fires whenever current window receives a new message. The message comes back as a property of the event. We have to register this event using jQuery’s bind() method so it works the same in all browsers

$(window).bind("message", function(event) {

Bind method wraps the event and doesn’t expose every property.

In my next post, Will tell you more features on HTML5.

Please don’t forget to share and subscribe to latest updates of the blog. Comments and feedbacks are always welcome! Thanks!

You May Also Like

7 Responses

  1. Lawrence says:

    Great stuff!

  2. Thirumani Raj says:

    Hi Karthikeyan, I want to learn a lot from you.

  3. ഫെബിന്‍ ജോയ് says:

    Hi Karthikeyan, I was looking for the offline data handling using HTML5. I hope i can ask ur help!

  4. pooja srivatava says:

    this is one of the great blog .You are giving very tutorials about the HTML5.

  5. rowild says:

    What is image_div exactly? A div or an img tag? And where does the image come from? This is a very uncomplete example and for a potential newcomer not really helpful… if you could improve the quality of your article/tutorial here, the web would have a better resource available.

  6. Ekta says:

    Hello Karthikeyan K
    how can i upload multiple images offline and then retrieve images and upload into folder when i come online status

Leave a Reply

Your email address will not be published. Required fields are marked *