Check internet status online or offline and show messages in js
We can use the JavaScript online or offline event to detect the online/offline status and display a message accordingly.
Today in this article we will see how can check if an internet connection exists or not and show an auto flash message using javascript.
Javascript online event:
The online event in JavaScript is triggered when the browser or device goes back online after being offline. The online event is a property of the window object and can be attached using the window.addEventListener method.
Example:
<script>
window.addEventListener('online', function() {
alert('You are now online');
});
</script>
Javascript ofline event:
The offline event in JavaScript is triggered when the browser or device goes offline. The offline event is a property of the window object and can be attached using the window.addEventListener method.
Example:
<script>
window.addEventListener('offline', function() {
alert('You are now offline');
});
</script>
Now we will show a flash message using online and offline events and a little bit of CSS.
Here is the Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Show message if machine is online or offline using javascript</title>
<style>
div#ofline_msg_outer,
div#online_msg_outer {
width: 100%;
/* height: 100px; */
background: #f9d8d8;
position: fixed;
bottom: 0px;
left: 0px;
color: #df1c7f;
text-align: center;
padding: 10px 5px;
z-index: 9999;
font-size: 25px;
box-shadow: 0px 0px 8px rgb(0 0 0 / 30%);
}
div#online_msg_outer {
width: 100%;
/* height: 100px; */
background: #d9f9d8;
position: fixed;
bottom: 0px;
left: 0px;
color: #1cdf26;
text-align: center;
padding: 10px 5px;
z-index: 9999;
font-size: 25px;
box-shadow: 0px 0px 8px rgb(0 0 0 / 30%);
}
</style>
</head>
<body style="padding: 50px 20px; font-family: Arial, Helvetica, sans-serif;">
<h2>Show message if machine is online or offline using javascript</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Exercitationem beatae recusandae vel repellendus illo
quos est a, quam alias unde nihil perspiciatis fuga modi aperiam. Voluptatem quisquam ex enim aliquid! </p>
<h2>Show message if machine is online or offline using javascript</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Exercitationem beatae recusandae vel repellendus illo
quos est a, quam alias unde nihil perspiciatis fuga modi aperiam. Voluptatem quisquam ex enim aliquid! </p>
<h2>Show message if machine is online or offline using javascript</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Exercitationem beatae recusandae vel repellendus illo
quos est a, quam alias unde nihil perspiciatis fuga modi aperiam. Voluptatem quisquam ex enim aliquid! </p>
<div id="online_msg_outer" style="display:block;">
<span id="online_msg">Welldone You are currently online.</span>
</div>
<div id="ofline_msg_outer" style="display:none;">
<span id="ofline_msg">OOps! You are currently offline.</span>
</div>
<script>
window.addEventListener('online', function () {
document.querySelector('#online_msg_outer').style.display = 'block';
document.querySelector('#ofline_msg_outer').style.display = 'none';
//alert("Now you are online");
});
window.addEventListener('offline', function () {
document.querySelector('#online_msg_outer').style.display = 'none';
document.querySelector('#ofline_msg_outer').style.display = 'block';
alert("OOps! you are ofline");
});
</script>
</body>
</html>
Note: The online or offline event in JavaScript is triggered by the browser or device, not the local machine, so it's possible that the event may not work in a local development environment where you're running the script in a browser that is not connected to the Internet.
Another reason why the online or offline event may not work on a local machine is due to browser compatibility issues. Some browsers may not support the online or offline event, or the event may not work consistently across different browsers.
It's recommended to test the online or offline event in a live environment where the browser is connected to the Internet to ensure that it's working as expected.