Wednesday, 31 March 2021

Toast Notification for Check Internet Connection with Bootstrap 4 & javascript

           , , , , , , ,      2 comments   

In this post, you will learn how to make a Toast Notification for Detect Internet Connection status using javascript, HTML and Bootstrap 4 Toast component. In this tutorial, we will use javascript and Bootstrap 4 library for display internet connection status. In web development display of push notification regarding Internet connection status feature is very useful, because in this middle of surfing website and suddenly internet connection lost, then at that time this push toast notification is very effective for display of internet connection status on web page.

Under this Toast Notification for check Internet connection status post, and under this we page, we will write light weight javascript code with Bootstrap 4 Toast component. So based on Internet connection status like online or offline then it will change its icon, text color and text according to status of internet connection. Here we have use Bootstrap 4 Toast component, so this component has some build in animation, so when internet connection status changes then it will display push toast notification at right side top of the web page, so user can see internet connection has lost or not.

For build this detection of Internet connection under this post, we have use simple javascript navigator.onLine code, This code has return true if internet connection is online and if it return false that means internet connection is offline. So based on this value toast notification icon, text and color will be change and it will display pust toast notification on web page. This push notification will display on web page, when internet connection status will be change. For implement this feature in your web application, you have to copy below code in your web based application and you can implement this how to display internet connection status on web page by using push notification which has been build with javascript and Bootstrap 4 Toast component.

Toast Notification for Check Internet Connection with Bootstrap 4 & javascript





Source Code






<!DOCTYPE html>
<html>
  	<head>
    	<title>Toast Notification for Check Internet Connection with Bootstrap 4 & javascript</title>
    	<meta name="viewport" content="width=device-width, initial-scale=1.0">
      	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  		<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
  		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.1/font/bootstrap-icons.css">
  	</head>
  	<body>
  		<div class="container">
  			<br />
  			<br />
    		<h1 align="center">Toast Notification for Check Internet Connection with Bootstrap 4 & javascript</h1>
    		<br />    		
    	</div>
    	
  	</body>
</html>

<div class="toast" style="position: absolute; top: 25px; right: 25px;">
    <div class="toast-header">
        <i class="bi bi-wifi"></i>&nbsp;&nbsp;&nbsp;
        <strong class="mr-auto"><span class="text-success">You're online now</span></strong>
        <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
    <div class="toast-body">
        Hurray! Internet is connected.
    </div>
</div>

<script>

var status = 'online';
var current_status = 'online';

function check_internet_connection()
{
    if(navigator.onLine)
    {
        status = 'online';
    }
    else
    {
        status = 'offline';
    }

    if(current_status != status)
    {
        if(status == 'online')
        {
            $('i.bi').addClass('bi-wifi');
            $('i.bi').removeClass('bi-wifi-off');
            $('.mr-auto').html("<span class='text-success'>You are online now</span>");
            $('.toast-body').text('Hurray! Internet is connected.');
        }
        else
        {
            $('i.bi').addClass('bi-wifi-off');
            $('i.bi').removeClass('bi-wifi');
            $('.mr-auto').html("<span class='text-danger'>You are offline now</span>");
            $('.toast-body').text('Opps! Internet is disconnected.')
        }

        current_status = status;

        $('.toast').toast({
            autohide:false
        });

        $('.toast').toast('show');
    }
}

check_internet_connection();

setInterval(function(){
    check_internet_connection();
}, 1000);

</script>

2 comments: