Checking Internet Connection With Toast Notifications Using Bootstrap 4 & JavaScript
The toast notification is a simple and effective way to deliver information to the user. It is automatically triggered by the JavaScript when the network connection has been lost.
Toast notifications are used in Bootstrap 4 framework for mobile devices, connected TVs, and wearables. Toast notifications can be built using Bootstrap 4 library for JavaScript or any other library like jQuery.
You can read this post to learn how to make a Toast Notification for detecting internet connection status in HTML, CSS & JavaScript. Here, we’ll be using Bootstrap 4 handy Toast component. In web development, a push notification to tell you about your Internet connection status is a valuable feature. Not only does it give the user peace of mind while surfing, but it can also provide useful information that’s unavailable from just looking at an icon, For a while now, push notifications have been quite effective for displaying connection status on websites.
Underneath this post and at the bottom of this page, we will include some light weight Javascript code that will just display a Toast notification when you’re checking your Internet connection. So, based on whether or not you’re connected to the internet it will change its status. If you’re offline, it’ll show an offline icon, turn whatever text color you have for offline messages to black, and make any text that your customer inputs brown. Here we’ve used the Bootstrap 4 Toast component, which gives you some built-in animations. When the connection status changes it will display a push toast notification at the top-right of the web page so that you can see when there’s an internet connection.
To build this function, we used the simple JavaScript code navigator.onLine. This code checks if an Internet connection is present, and if it detects one, it will return ‘true’, otherwise it will return false. I need to do more testing on this pilot feature, but this toast notification icon will allow you to change the text and color of notifications that are displayed on web pages. Plus, it will send a push notification for when internet connection status is changed. For now, I’m just researching how best to implement this pilot feature. Now just you need to copy this code into your web-based app and then implement this function to display internet connection status using a push notification which has been built with JavaScript and Bootstrap 4 toast component.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 |
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Checking Internet Connection With Toast Notifications Using 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"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css"> </head> <body> <div class="container"> <h1 class="text-center mt-5">Checking Internet Connection With Toast Notifications Using Bootstrap 4 & JavaScript</h1> <!-- Flexbox container for aligning the toasts --> <div aria-live="polite" aria-atomic="true" class="d-flex justify-content-center align-items-center" style="min-height: 200px;"> <div role="alert" aria-live="assertive" aria-atomic="true" class="toast" data-autohide="false"> <div class="toast-header"> <i class="bi bi-wifi"></i> <strong class="ml-2 mr-auto">Connected!</strong> <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="toast-body"> You are connected to the Internet! </div> </div> </div> <h3 class="text-center mt-5">For testing, turn on/off your internet and check the toast notification.</h3> </div> <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> <!-- Custom Script --> <script> var status = 'online'; var current_status = 'online'; function check_internet_connection() { if(navigator.onLine) { status = 'online'; } else { status = 'offline'; } if(status == 'online') { $('i.bi').addClass('bi-wifi'); $('i.bi').removeClass('bi-wifi-off'); $('.mr-auto').html("<span class='text-success'>Connected!</span>"); $('.toast-body').text('You are connected to the Internet!'); } else { $('i.bi').addClass('bi-wifi-off'); $('i.bi').removeClass('bi-wifi'); $('.mr-auto').html("<span class='text-danger'>Disconnected</span>"); $('.toast-body').text('No Internet Connection') } current_status = status; $('.toast').toast({ autohide:false }); $('.toast').toast('show'); } check_internet_connection(); setInterval(function(){ check_internet_connection(); }, 2000); </script> <!-- End Custom Script --> </body> </html> |
Conclusion
The conclusion of this tutorial is to show how easy it is to code a interactive notification for checking internet connect using Bootstrap toast norifications, JavaScript, HTML and CSS. This is not the only way to create a notification but it does work well with Bootstrap 4.
