Detect online offline statis

We can detect if the user is *online* or *offline* by using the #key# online property: will return true if the user is connected to the internet; otherwise, it returns false. #key# on the `navigator` object.

document.addEventListener("DOMContentLoaded", function () {
  let content = document.getElementById('content');
  let textContent = `Your network status is ${navigator.onLine ? "Online" : "Offline"} `;
  content.textContent = textContent;
});


codemirror

Additionally, *online* and *offline* events will be triggered if the user's internet status changes. So, we can add an *online* and *offline* event listener to the window and perform respective actions based on the online or offline state.

<html>
 <head>
 </head>
 <body>
   <h3>Try turning the connection off and on, the status will be updated</h3> 
   <div id="content"></div>
 </body>
</html>

Let's create a traffic light to display the network status. By default, we will show a yellow color. Try disconnecting the network to see the changes.

window.addEventListener('online',  updateOnlineStatus);
window.addEventListener('offline', updateOnlineStatus);

function updateOnlineStatus(event) {
  var condition = navigator.onLine ? "online" : "offline";
  document.body.className = condition;
}


html,body{
  min-height:100%;
  width:100%;
}
*{
  margin:0px;
  padding:0px;
}
#heading{
  width:100%;
  text-align:center;
  padding:30px;
  color:rgba(255,255,255,0.5);
}
.default #heading:after{
  content:"Try to DISCONNECT from Internet...";
}
.offline #heading:after{
  content:"Oops you are OFFLINE...";
}
.online #heading:after{
  content:"Wow! You are ONLINE again...";
}
.trafficlight{
  background: #222;
  background-image: linear-gradient(transparent 2%, transparent 3%, #111 30%);
  width: 15vh;
  height: 40vh;
  margin: 4vh auto 0vh;
  border-radius: 0px 0px 8vh 8vh;
  position: absolute;
  bottom: 24.5vh;
  left: calc(50% - 7.5vh);
  border: solid .5vh #333;
}

.trafficlight:before{
  background: #222;
  background-image: radial-gradient(#444, #000);
  content: "";
  width: 15vh;
  height: 15vh;
  margin: 0 auto;
  position: absolute;
  top: -2.5vh;
  margin-left: 0ph;
  border-radius: 50%;
  z-index: -1;
}

.trafficlight:after{
  background: #222;
  background-image: linear-gradient(-90deg, #222 0%, #444 30%, #000);
  content: "";
  width: 5vh;
  height: 50vh;
  margin-left: 5vh;
  position: absolute;
  top: 15vh;
  z-index: -1;
}

.protector{
  background: transparent;
  width: 17vh;
  height: 0;
  position: absolute;
  top: 2vh;
  left: -5vh;
  border-right: solid 4vh transparent;
  border-left: solid 4vh transparent;
  border-top: solid 10vh #222;
  border-radius: 1.5vh;
  z-index: -1;
}

.protector:nth-child(2){
  top: 14vh;
}

.protector:nth-child(3){
  top: 26vh;
}

.red{
  background: red;
  background-image: radial-gradient(brown, transparent);
  color:red;
  top: 2vh;
  border: dotted .2vh red;
}

.yellow{
  background: yellow;
  background-image: radial-gradient(orange, transparent);
  color:yellow;
  border: dotted .2vh yellow;
  top: 14.5vh;
}

.green{
  background: green;
  background-image: radial-gradient(lime, transparent);
  color: green;
  border: dotted .2vh lime;
  top: 27vh;
}

.red, .yellow, .green{
  background-size: .5vh .5vh;
  width: 10vh;
  height: 10vh;
  border-radius: 50%;
  position: absolute;
  left: 2.5vh;
  box-shadow: 0 0 2.0vh #111 inset;
  cursor:pointer;
  font-weight:900;
  font-size:2.2vh;
  text-align:center;
  line-height:10vh;
}

.default .red, .default .green,
.online  .red, .online .yellow,
.offline .green, .offline .yellow
{
  opacity:.3;
}
.default .yellow,
.online  .green,
.offline .red{
  opacity:1;
}

body.default{
  background: linear-gradient(#08f, #fff);
}
body.offline{
  background: linear-gradient(#f80, #fff);
}
body.online{
  background: linear-gradient(#0f8, #fff);
}

How to detect online/offline status in Javascript

We can detect if the user is online or offline by using the online propertywill return true if the user is connected to the internet; otherwise, it returns false. on the navigator object. 