HTML5

Application Cache in HTML5

April 20, 2015 by ashish shukla Leave a Comment

As we know Web applications always needs a network connection to function.This is the most important requirement for web applications.Though much more devices are connected to the internet today than ever before but still network connectivity can be lost due to several reasons. Application Cache in HTML5 allows users to access the web application even when there is no network connection.

So offline web applications is contradictory to how we perceive web applications.Conventional web applications are expected to be always connected to the internet or network.Offline web application work in the following manner

Web application is accessed through a URL from web browser
Browser reads the manifest file and caches the resources mentioned in the manifest file
If the web application goes offline browser uses the cached copies of the resources
If we save any information while the application is offline then it would be synchronized with the server once the application goes online again.

We can specify the web pages or other files such as images to be accessed from the cache when the application is offline.

There are two important components to implement the offline web application in HTML5.

1)Add the cache manifest file Application cache works using the cache manifest file ,which is a text file that contains the list of resources to be cached.These cached resources are then served from the cache when the network is not available.

Its important to see that the cache manifest file is served with the content type of text/cache-manifest.We need to ensure on the web server that the content type for the manifest file is “text/cache-manifest”.

2)Add the manifest attribute to the html element in the web page We need to attach the manifest attribute to the html element of the page to enable application caching.If we add the manifest attribute then the page is automatically cached and we do not need to explicitly add it to the manifest file.

<html manifest="cache.manifest">

Following are the sections in the cache manifest file

CACHE MANIFEST The resources which are listed here will be downloaded and used when the network connection is not available.

NETWORK The resources which are listed here will never be cached.Suppose if we have a webpage which needs to be connected to the network to function correctly then we may not need the web page to be available offline.This webpage we can include in the NETWORK section.

FALLBACK This section tells the browser which resource to serve when the application goes offline and the requested resource is not cached.It contains two URL entries ,one is the resource which is requested and the second is the resource to serve when the first resource is requested and is unavailable.

/UnCached.html /Cached.html

Following is a sample manifest that contains different sections:

CACHE MANIFEST
# this is a comment

# mention resources to cache here
CACHE:
home.html
stylesheet.css
images/home.png
scripts/common.js

# resources which requires network connection
NETWORK:
login.html

# static.html will be served if dynamic.html is inaccessible
FALLBACK:
/dynamic.html /static.html

Application cache provides the following advantages

Webapplication can work even without network connection.
If there are some application resources which are never updated we can load these resources from the cache instead of fetching them from the server.This reduces the load on the server.Also this means that resources will be loaded in less time.

ashish shukla

Follow on:

Web Storage in HTML5

April 14, 2015 by ashish shukla Leave a Comment

Web applications have a different execution model from the thick client or windows applications.Unlike windows applications which executes locally web applications executes on the remote server while user interaction with the application happens on the client’s browser.So the webpage needs to post data to the server to update the information on the server.But sometimes we need to store the data locally on the client’s machine.This has always been a big challenge for the web applications.

This is because HTTP is a stateless protocol which means that once the current request is completed all the state information is lost.

When the web page needs to access data ,it needs to fetch the data from the web server.This impacts the performance as there is a network latency in the case of web applications.Also this results in server load as the webserver needs to fetch and return the data.

To overcome these limitations client storage is used in the case of web applications.Web Storage is one such technology provided by HTML5 which supports client side storage

Some of the advantages of client side storage are:

1)Improved performance : as we don’t need to wait for the response from the web server.The data can be displayed as soon as the user clicks on a button.

2)Application can work Offline: Our application can work even when it is offline ,the data can be synced back with the web server once the network connection is available.

But one precaution which needs to be taken when storing the data locally on the client is since the data is more vulnerable as it is stored on the client instead of server so it needs to be ensured that it is not tampered with.

Cookies were used for storing data on the client but HTML5 webstorage provides the following adavantages

Cookies are transmitted with every HTTP request,while webstorage doesn’t needs to be transmitted to the server for every request.
Cookies have a size limit of 4KB,while webstorage provides 5MB size limit in the case of most browsers.

Webstorage depending upon the usage can be of two types.

Local Storage: stores the data with no expiration and data is available even after the session expires.
Session Storage: stores data for a specific session

There are two different objects localStorage and sessionStorage available in javascript for these two storage types

We can check if the browser supports web storage using the following code

if(typeof(Storage) !== "undefined") {
// browser supports web storage
} else {
//browser does not support web storage
}

We can also use Modernizr library to detect if our browser supports localstorage

if (Modernizr.localstorage) 
{
//localStorage is supported
} 
else 
{
//localStorage is not supported
}

Two important methods defined by the LocalStorage and SessionStorage objects are:

setItem(“key”, “value”)
getItem(“key”)

If our browser supports webstorage we can set the data in the localStorage using the following code

localStorage.setItem("key", "value");    or
localStorage.key=value

for retrieving we can use the following

localStorage.getItem("key");  or
localStorage.key

We can remove item which we have previously stored using the removeItem() method as:

localStorage.removeItem(“key”)

Similarly we can use the sessionStorage.To use sessionStorage we just need to replace localStorage with sessionStorage in the above code.The syntax for both LocalStorage and SessionStorage is same though each is used in a different scenario.

In chrome to view the LocalStorage and SessionStorage currently being used click on the developer tools.In the resources tab we can view the SessionStorage and LocalStorage being used.

Web Storage in HTML5 provides an efficient way of storing information on the client.

ashish shukla

Follow on:

Web Workers in HTML5

April 13, 2015 by ashish shukla Leave a Comment

Web applications of today are becoming as much responsive and user friendly as the desktop applications as more and more processing is being done on the client side.Performing tasks on the client means more computations need to be performed on the client’s machine.
With the introduction of javascript frameworks like jquery and angularJS we can easily create a complex application in which much of the application logic resides on the client side.

But doing more processing on the client’s machine has one big consequence.If the computation is complex enough to consume more processing time,the end user may be blocked to perform any other operation.It is not uncommon to see dialog box such as below due to unresponsive web page.

Non-responsive web page dialog in Chrome

The reason for the unresponsive web page is that javascript runs in a single thread,which means that as one javascript command is executing the next command will have to wait ,as the code executes sequentially.So a computationally complex operation may block the rest of the code from executing.

Web workers provides a means of executing javascript code in separate threads.So a web worker is a means of bringing multithreading support to javascript programming.

Because of this browser can execute multiple tasks at the same time.As the processing power of the client’s machines is increasing day by day ,so it is not uncommon to have a multicore processor which can really use the multithreaded programming model provided by webworker.

Workers can be of two types dedicated and shared.The difference is that a dedicated worker can be accessed only by the code which has created it while shared worker can be accessed by any script.Here we will be considering only the dedicated worker.

Implementing worker which executes javascript in our web page is a simple.We just need to follow the below steps:

1.Check if the browser supports worker.To check if the browser supports dedicated worker we can use the following code.

if (window.Worker) 
{
/*browser supports worker*/
}

2. Create a .js file which contains the javascript code that we want the worker to execute.

var count = 0;
function incrementCount() {
   count = count  + 1;
    postMessage(count); /*pass the response to web page */
   }

3.Create worker object and the pass the name of the file created in step 1 above as an argument to it’s constructor.

var worker = new Worker('worker.js');

4. We start the worker by calling the postMessage() function on the worker object.

worker.postMessage();

The above steps are sufficient to create a webworker and start it.There are few other things which we can do while working with the webworker object.

We may need to pass data from the web page to the webworker.
We may need to receive data from the webworker in the calling webpage.
We may need to terminate the worker object once we are done using the object.

5. Passing the data from the WebPage to the worker

To pass and receive data we use event handling and the postMessage() function.We pass the data to the worker as an argument to the postMessage() function.

worker.postMessage("Hello worker!")

6. Receiving the data from the worker in the WebPage

To receive the data passed from the worker in the webpage we use the onmessage event.evt.data contains the data passed by the worker.

worker.onmessage = function OnMessageReceived(evt){
alert("Message from worker: " + evt.data);
}

7. Terminating the webworker

Once we are done using the worker ,its important to terminate the worker object otherwise it will continue to run and consume the system resources.To terminate the worker object we just need to call the terminate method on the worker object

worker.terminate();

Web Workers in HTML5 brings multithreading programming model to the client side.This helps in creating asynchronous applications.Tasks which require heavy processing can be done in a separate thread while the main thread can process UI events.

ashish shukla

Follow on: