MrBool
You must be logged in to give feedback. Click here to login
[Close]

You must be logged to download.

Click here to login

[Close]

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

[Close]

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

How to Implement Offline Support using HTML5

We will learn in this article how to implement offline support making use of HTML5.

[close]

You didn't like the quality of this content?

Would you like to comment what you didn't like?

Introduction

At times, you must have noticed that while you are surfing a website, a message, such as ‘Browser could not open the Web page’, is displayed. This is because the connection to the Internet is lost. In such a case, you do not have access to the website that you were surfing. However, if you want to have some level of access to the website even if you are not connected to the Internet, you can use the offline support feature.

For example, the executives of ShopHere often need to visit different cities to advertise their products. They need to access the organization’s website during their promotional tours. However, the website is not accessible every time, especially in the remote areas where the network is not available. In such a case, the offline support feature of HTML can be used to ensure that the website is accessible to the executives even without the Internet connection.

In addition, using the offline support feature avoids the normal network requests needed to load a website.

Before the offline support feature of HTML, the offline storage-enabled websites were created using cookies and plugins. A cookie is a small piece of data, which is sent from a website and stored in a user’s browser while the user browses the website. When the user revisits the same website, the data stored in the cookie is retrieved. Cookies are not purely used for offline storage as they store a limited amount of data. In addition, cookies slow down the network activity because they are transferred to and from the server.

These limitations are overcome with the help of the offline support feature of HTML. The offline support feature provides the following benefits:

  • Ensures that the website is available even when the user is not connected to the network.
  • Reduces network load on the server.

You can make your website work offline by using the following ways:

  • Implementing client-side storage
  • Implementing application cache

Implementing Client-side Storage

The client-side storage refers to the process of storing data locally within the user’s browser.This is also known as Web storage. The data stored by using client-side storage is retrieved only when it is requested, and not with every server request. Moreover, you can store a large amount of data by implementing the client-side storage, where the data is stored in the form of key/value pairs. The client-side storage can be implemented by using the following objects:

  • localStorage
  • sessionStorage

localStorage

The localStorageobject allows you to store data without any expiration date. This implies that the data stored by using the localStorageobject is not deleted after the browser is closed, and it will be available when the browser is reopened. The localStorageobject stores the data only in the form of string. Using this object, the cached data is accessible across all browser windows.

Listing 1: Consider the following code snippet for storing the users’ information by using localStorage:

<DIV ID="str"></DIV>
 <SCRIPT>
 if(typeof(Storage)!=="undefined") {
localStorage.name="John";document.getElementById ("str").innerHTML="Name: " + localStorage.name; 
} else {
document.getElementById ("str").innerHTML="Your browser does not support local storage"; 
}
 </SCRIPT>

In the preceding code snippet, the typeof()method first checks whether the browser supports the Web storage or not. If it does, thelocalStorageobject stores the user’s name locally in the browser by using the key, name, which is assigned the value, John. Later, the information stored in the localStorage object is retrieved by using the key and is assigned to the innerHTMLproperty of the

tag that has ID, str.The text, Your browser does not support.

local storage, is displayed inside the

tag if the browser does not support the Web storage.

sessionStorage

The sessionStorageobject is used to store the data for only one session. This implies that the data is deleted once the user closes the browser. The data stored by using sessionStorageis confined to the browser for which it was created. Consider an example where you need to count the number of times a user has clicked a button in the current session.

Listing 2: For this, you can use thesessionStorage object, as shown in the following code snippet:

<HEAD> <SCRIPT> function clickCounter() 
{
 if(typeof(Storage)!=="undefined"){
if (sessionStorage.clickcount)
{
sessionStorage.clickcount=Number (sessionStorage.clickcount)+1; }
else{sessionStorage.clickcount=1;}document.getElementById ("btn").innerHTML="You have clicked it" +sessionStorage.clickcount + " time(s) in this session."; } 
else {document.getElementById ("btn").innerHTML="Your browser does not support Web storage"; } 
}
 </SCRIPT> 
</HEAD> 
<BODY> 
<p>
<BUTTON onclick="clickCounter()" type="button">
Click Here
</BUTTON>
</P> <DIV ID="btn"></DIV> <P>Click the button to see the increase in counter.</P> <P>Close the browser and try again, the counter will be reset.</P> </BODY>

The preceding code snippet creates the clickCounter() function that is called when the button is clicked. Inside the function body, the typeof() method first checks whether the browser supports the Web storage or not. If it does, the clickCountkey is used with the sessionStorageobject to store the count or number of times the user has clicked the button during the current session. The value of the key, clickCount, is increased by one every time the user clicks the button. Since the value assigned to the key of the sessionStorage object is always a string, it is converted into a number before incrementing by one, by using the Number() method. The most recent value stored inside the sessionStorageobject is retrieved by using the key, clickCount, and is assigned to the innerHTMLproperty of the

tag that has ID, btn, which is displayed before the user.

Implementing Application Cache

While browsing a website, you must have faced a situation when the network connection is lost and you click the Back button in the browser to view the previous page. However, you are not able to view that page as you are not connected to the Internet, and the browser did not cache the page properly. To view the previous page in such a situation, you need to reconnect to the Internet. To address such issues, while developing a website, you can specify the files the browser should cache so that even if you refresh the page when you are offline, you are able to view the page. This process of caching a website is known as application cache. The application cache provides the following advantages:

  • Offline browsing: Specifies that a website can be viewed even if the user is not connected to the Internet.
  • Speed: Specifies that if the user requests the Web page, which is already there in the cache, it is retrieved from the cache and not from the server. Therefore, the loading of the Web page is faster as the network is not accessed as the connection to the server is not needed.
  • Reduced server load: Specifies that the Web page, if cached, will always be made available from the cache unless the browser detects that the cache manifest has been updated on the server or the user has cleared the browser cache. Then, the browser downloads a new version of the manifest and the resources listed in the manifest. Therefore, the number of requests sent to the server are less; thereby, reducing the load on the server.

To implement application cache, you need to create a text file called manifest. This file contains a list of resource that needs to be cached for use when there is no network connectivity. The manifest file also contains the list of files or pages that should never be cached. You need to save the manifest file with the .appcache extension. The manifest file is divided into the following sections:

  • Cache: Lists the files that need to be cached after they are downloaded for the first time.
  • Network: Lists the files that should never be cached.
  • Fallback: Specifies the task to be performed when a user tries to fetch the uncached files. To refer to a manifest file in an HTML document, you need to add the manifest attribute in the opening tag, as shown in the following code snippet:
<HTML manifest="HotelFacilities.appcache"> 

The preceding code snippet enables the application cache for the HotelFacilities.appcachemanifest file. Once you have cached an application on the local machine, the browser shows the cached file even if it has been changed or updated on the server. Therefore, to ensure that the browser updates the cache, you need to modify the manifest file.

Conclusion

The offline support feature provides the following benefits:

  • Ensures that the website is available even when the user is not connected to the network
  • Reduces network load on the server

The client-side storage refers to the process of storing data locally within the user’s browser. The client-side storage can be implemented by using the following objects:

  • localStorage
  • sessionStorage

The localStorageobject allows you to store data without any expiration date. The sessionStorageobject is used to store the data for only one session. This implies that the data is deleted once the user closes the browser. To implement application cache, you need to create a text file called manifest. You need to save the manifest file with the .appcache extension.

See also:



Software developer with more than 5 years of development on Java, HTML, CSS.

What did you think of this post?
Services
Know how to keep MrBool Online
SUPPORT US
SUPPORT US
With your help, we can keep providing free content and helping you to be a better professional
support us
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually � in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits � in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login