Check the status of network connection in web apps

You can listen to network status changes through event listeners.

// listening whether the network comes online
window.addEventListener('online', event => {
  console.log('Your network is online again');
});

// listening whether the network goes offline
window.addEventListener('offline', event => {
  console.log('You network connection is lost');
});

You can also check the current status of the network,

// Check the current status of the network
console.log(window.navigator.onLine); // true - Online, false - offline

Often, apps show a toast message that connection is lost. This is how they achieve it and notify the user real-time on the page.

Toggle your network and check the console to test it out,