Web Development

Check Network Status using HTML5 and Javascript

As we all know HTML5 a major revolution in WWW. Most of the developers have started using HTML5 in their real projects if you have not started yet then do it start from now becuase HTML5 is going to be buzz in next couple of years in the Web technology.

You can see that big boys of Internet like “Google“, “Facebook” and few other have started building HTML5. In today’s article I will show you one of the new feature of the HTML5 is Check Network Status.

Yes we can check the Status of the user’s network using the [code]navigator[/code] object. This code will work in all major browser browser. I have tested this in IE 7 and it works.

Now let’s see how we can use this navigator object to get the network status using Javascript. Have a look at below code block for the same.

[cc lang=”javascript”]
if(navigator.onLine)
{
alert(‘You are Online’);
}
else
{
alert(‘You are Offline’)
}
[/cc]

Isnt’t it so simple? I think it is.

Live Demo

I have created one demo page for you to see this in action. Here are the step for how you can test this page/demo.

Step 1:

Load this page : HTML5 Check Network Status Demo

Step 2:

As you are connected to the internet so it will show your status as ONLINE. But to check for the OFFLINE you can do two things. Either change place your browser to work offline or disconnect your internet connection.

If you are not sure about how to place your browser into Offline mode then have a look at below image for the same.

Set Offline mode for Browser

Offline mode is NOT available in Chrome, You can set this in Mozilla and Internet Explorer from File menu.

Step 3:

Now click on Check Network Status button without refreshing the page. It should show OFFLINE now with red text.

There in one more other APIs there about which I have already written articles on this site. You can see this article here.

I hope you have enjoyed this article, subscribe to our mailing list if you don’t want to miss any new article. Do Consider to share this article if you think this might be useful to other.

Shares:

Leave a Reply

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