Web Development Blog

1. Geolocation
2. onLine
3. Audio and Video
4. Local Storage
5. History

Geolocation

Geolocation API is usually used together with Google Maps to show the current location of the device.

Where would you use it?
Geolocation is an essential feature for applications that needs to know information about the device’s current location such as Store Locator, Cinema Finder and Get Directions.

Example

if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(successcalllback, errorcallback);
} else {
  errorcallback('This feature is not supported on your device.');
}

function successcalllback(position) {
   console.log(position);
}

function errorcallback(message) {
  console.warn(message);
}

onLine

This HTML5 feature checks the status of Internet connection for the current device.

Where would you use it?
It is a good practice to check if a device has an Internet connection before making an AJAX request to a web service.

Example

var isonline = (navigator.onLine) ? true : false;

Audio and Video

<audio> and <video> are HTML5 elements that enable audios and videos to be displayed on web pages without using a third-party plugin like flash.

Where would you use it?
When you are developing a website or a web app for smartphones, you will want to use audio and video elements to embed media as it will enable those media to be played using the device’s default players, resulting in a better performance and user-experience.

Example

<audio controls="controls" autoplay="autoplay">
  <source src="audio.ogg" type="audio/ogg" />
  <source src="audio.mp3" type="audio/mp3" />
  This feature is not supported on your device.
</audio>

<video width="300" height="200" controls="controls">
  <source src="video.mp4" type="video/mp4" />
  <source src="video.ogg" type="video/ogg" />
  This feature is not supported on your device.
</video>

Local Storage

Local Storage acts like a client-side database which your application can use to store information. Unlike cookies, there is a lot of storage space available (5MB) and it is relatively easy to store information into and retrieve information from Local Storage.

Where would you use it?
As the name suggests, Local Storage resides on the user’s local browser and is useful if you wish to remember user’s perferences and usage history.

Example

if(typeof(Storage)!== "undefined")  {
     localStorage.setItem("name", "John Smith");   //save
     console.log(localStorage.getItem("name"));  //retrieve
     localStorage.removeItem("name"); //delete
} else {
     console.warn('This feature is not supported on your device.');
}

History

History API enables deep linking of ajax-powered pages without having to manipulate the current page’s URL.

Where would you use it?
If you have a page where content changes on user’s action without a page refresh, then History API can be used to manipulate browser history so user can move backward and forward between actions.

Example

var pages = [
        {
            "content": "Contentforpageone",
            "photo": "image1.jpg"
        },
        {
            "content": "Contentforpagetwo",
            "photo": "image2.jpg"
        },
        {
            "content": "Contentforpagethree",
            "photo": "image3.jpg"
        }
];

function update(data) {
        $('#content').html(data.content);
        $('#image').attr('src', data.photo);
}

$(function() {
    $('.next, .prev').live('click', function(e) {
        
        var pageno = e.target.getAttribute('href').split('/').pop(),
        data = pages[pageno] || null; 
        
        update(data);
        
        // add to history
        history.pushState(data, e.target.textContent, e.target.href);
        
        e.preventDefault();

    });

    window.addEventListener('popstate', function(e) {
      update(e.state);
    });

	history.replaceState({
	  content: pages[0].content,
	  photo:  pages[0].photo
	}, document.title, document.location.href);

});

<ul>
    <li><a href="/0" class="prev">Previous</a></li>
    <li class="current">1</li>
    <li><a href="/2" class="next">Next</a></li>
</ul>
<div id="content"></div>
<img src="noimage.jpg" alt="" id="image" />

Found this article useful? Share it with your friends: