Exploring HTML5 API for Enriched Web App Development & Experience

Few days back,somehow i noticed chrome browser way of handling and enhancing the API for web similar to the Apps that run on devices.Such as prompting for Notifications,locations,Vibrations,Offline Storage and even more API and making it more interesting to develop apps for Web and Web based mobile apps.So,skimming and getting deep into the API's using Javascript and enhancing the user experience and Developer experience.Using it Appropriately at right place at right time will really be gain on both sides.This tutorial will help you to get to know and learn about more powerful Javascript API.

Reference : Demo | Download

Prerequisites :

• HTML5 based web browser.(probably Chrome,which i love it more.)
• few considerable skill to work on Javascript.
• little patience to work with code.

Procedure :

we'll try to work on few API such as Notification API,Location API,Offline Storage API and with Server Sent Events.

Notification API : 

Notification plays vital part in showing new information received to the corresponding service and showing to the end users.you would have experienced this when you get an email notification when you work in desktop and getting chat notifications while working with other tabs.

function notify() {
   if (!("Notification" in window)) {
     alert("This browser does not support desktop notification");
   } else if (Notification.permission === "granted") {
     var notification = new Notification("Hi there!");
   } else if (Notification.permission !== 'denied') {
     Notification.requestPermission(function(permission) {
       if (permission === "granted") {
        var notification = new Notification("Shiva has Messaged You!");
       }
     });
   }
}

from the above snippet we have written as function for notification handling,in which it requires users permission to send notification,So we are just requesting the user for the Permission as soon as user gives away the permission and callback function is invoked for making further actions.Note that always check for the permission before sending the notification and send only legit/reasonable notification because it may irritate users on seeing more notifications.And perform a check over the browser supports notification API in advance as initialization and perform the other related tasks.

Location API :

Location is another aspect for developers to choose languages,localtime or even advertisements and stats of the website may be useful for future purpose(Business decisions) and knowing about the website users geolocation.

function shareLocation() {
   var output = document.getElementById("out");
   if (!navigator.geolocation) {
     output.innerHTML = "<p>Geolocation is not supported by your browser</p>";
     return;
   }

   function success(position) {
     var latitude = position.coords.latitude;
     var longitude = position.coords.longitude;

     output.innerHTML = '<p>Latitude is ' + latitude + '° <br>Longitude is ' + longitude + '°</p>';

     var img = new Image();
     img.src = "https://maps.googleapis.com/maps/api/staticmap?center=" + latitude + "," + longitude + "&zoom=13&size=700x250&sensor=false";

     output.appendChild(img);
   };

   function error() {
     output.innerHTML = "Unable to retrieve your location";
   };

   output.innerHTML = "<p>Locating…</p>";

   navigator.geolocation.getCurrentPosition(success, error);
 }

And in the above code we just requested the browser for the current location on and browser and probable(Chrome) explicitly asks for permission to share the info to the particular site.here as an callback success we have got latitude and longitude ,with those using the Google Maps API service call we just bought the map into the document(The locations may be vary since it is based on your ip.(if you're a broadband user you may get a correct location where as such as 2G and 3G service you may get the Server location

(As far i had seen).

Offline Storage API :

With this powerful API in HTML5 we could easily use the database on front end client side and making the load time and process time easier on server side.For example,When you look like application facebook,G+ posts can be saved locally in database (offline storage) and can be updated when they are connected to the network next time.this will really increase the loading time and rendering time minimum.instead of  requesting the server for the whole newsfeed contents.

IndexedDB - Offline Database 

This support storing object,create,update and delete like relational Database and have a look at it here.

LocalStorage : 

Before HTML5 there was a big story behind this,have a read.So we are in the age of good developed and matured API.

function localstore() {
   if (typeof(Storage) !== "undefined") {
     // Code for localStorage/sessionStorage.
     localStorage.setItem("name", "Shivasurya");
     localStorage.setItem("company", "i-visionblog");
     alert("saved the values");
   } else {
     alert("Your Browser Doesnt Support Storage Feature");
   }
 }

 function retrieveStore() {
   alert(localStorage.getItem("company"));
   } 

So from the above code you can utilize the localstorage as key pair value and retrieved using the key from the storage.this is mostly used among the web developers,However try to use the indexed DB for complex apps and solve a loading time and increasing the productivity.

Live Demo : 

function notify() {
   if (!("Notification" in window)) {
     alert("This browser does not support desktop notification");
   } else if (Notification.permission === "granted") {
     var notification = new Notification("Hi there!");
   } else if (Notification.permission !== 'denied') {
     Notification.requestPermission(function(permission) {
       if (permission === "granted") {
         var notification = new Notification("Shiva has Messaged You!");
       }
     });
   }

 }

 function shareLocation() {
   var output = document.getElementById("out");
   if (!navigator.geolocation) {
     output.innerHTML = "<p>Geolocation is not supported by your browser</p>";
     return;
   }

   function success(position) {
     var latitude = position.coords.latitude;
     var longitude = position.coords.longitude;

     output.innerHTML = '<p>Latitude is ' + latitude + '° <br>Longitude is ' + longitude + '°</p>';

     var img = new Image();
     img.src = "https://maps.googleapis.com/maps/api/staticmap?center=" + latitude + "," + longitude + "&zoom=13&size=700x250&sensor=false";

     output.appendChild(img);
   };

   function error() {
     output.innerHTML = "Unable to retrieve your location";
   };

   output.innerHTML = "<p>Locating…</p>";

   navigator.geolocation.getCurrentPosition(success, error);
 }

 function localstore() {
   if (typeof(Storage) !== "undefined") {
     // Code for localStorage/sessionStorage.
     localStorage.setItem("name", "Shivasurya");
     localStorage.setItem("company", "i-visionblog");
     alert("saved the values");
   } else {
     // Sorry! No Web Storage support..
     alert("Your Browser Doesnt Support Storage Feature");
   }
 }

 function retrieveStore() {
   alert(localStorage.getItem("company"));
 }

See the Pen HTML5 API - i-visionblog by s.shivasurya (@shivasurya) on CodePen.

Final note :

And thus we have seen few rich set API which can be used at appropriate need in web apps and enhance the user experience.However always check for support of the API on load itself and then invoke calls and respect the users behavior always and forcing them for permission and locking them this will be creating bad impressions.

And there are still lot in HTML5 API such as detecting online/offline status,Canvas 2D drawing,animation,vibration API,full screen API,Audio & videos and WebRTC api for live webcam access and peer-to-peer communications.

for Hugs/bugs/errors/enhancements just comment below or drop me a mail to [email protected] or chat with me in G+/facebook/Quora and do follow me in twitter/newsletter for regular updates.Share is care.

Read More