How can I detect if the navigator changed your state to online/offline?

something like:

var oldState = navigator.onLine; 
window.navigator.onlinechange = function(evnt,newState) { 
         alert('your changed from' + oldState + ' to' + newState + 'state');
}

How can I detect if the navigator changed your state to online/offline?

something like:

var oldState = navigator.onLine; 
window.navigator.onlinechange = function(evnt,newState) { 
         alert('your changed from' + oldState + ' to' + newState + 'state');
}

• javascript
• onchange
• navigator

• In fact navigator.onLine does not shows internet availability. It only shows is your computer connected to any network. Use github.com/PixelsCommander/OnlineJS instead. It have corresponding callbacks, just include online.js to porject and set window.onLineHandler and window.offLineHandler functions. – PixelCommander Commented Dec 7, 2012 at 23:38

4 Answers 4

With the help of classes on body and this code you can find

window.ononline = function() {
    alert('You are now online');
}

window.onoffline = function() {
    alert('You are now offline');
}

Something like this (not every browser supports these events, currently only IE 8,9 and FF > 3 support these events):

var el = document.body;
if (el.addEventListener) {
   el.addEventListener("online", function () {
     alert("online");}, true);
   el.addEventListener("offline", function () {
     alert("offline");}, true);
}
else if (el.attachEvent) {
   el.attachEvent("ononline", function () {
     alert("online");});
   el.attachEvent("onoffline", function () {
     alert("offline");});
}
else {
   el.ononline = function () {
     alert("online");};
   el.onoffline = function () {
     alert("offline");};
}

The browser support varies, check this out: http://help.dottoro.com/ljnasgpu.php

If it needs to be more cross browser compatible you have to poll the navigator.onLine property.

var status = document.getElementById('status')

setInterval(function () {
  status.innerHTML = navigator.onLine ? 'online' : 'offline';  
}, 250);

Demo: http://html5demos.com/nav-online

You can find the documentation for online and offline event on MDN, They provide examples for the two ways to set an event handler for those events window.addEventListener("online", eventHandler) and window.ononline = eventHandler. These are the examples they provide:

// addEventListener version
window.addEventListener("online", (event) => {
  console.log("You are now connected to the network.");
});

// ononline version
window.ononline = (event) => {
  console.log("You are now connected to the network.");
};

// addEventListener version
window.addEventListener("offline", (event) => {
  console.log("The network connection has been lost.");
});

// onoffline version
window.onoffline = (event) => {
  console.log("The network connection has been lost.");
};

For Service Workers you don't have access to window so you need to setup the handler in the main JS and forward the changes to the service worker via sw.postMessage(), Channel Messaging API or Broadcast Channel API