After years, I've found a more reliable way to attach an event for connection changes
navigator
object has a connection
which in turn has an onchange
property which expects a callback method to be executed whenever a connection change occurs
navigator.connection.onchange=function()
{
if(navigator.onLine)
{
console.log('Connection is okay')
}
else
{
console.log('Connection lost')
}
}
But...According to MDN, the navigator.onLine
could return false positives
In Chrome and Safari, if the browser is not able to connect to a local
area network (LAN) or a router, it is offline; all other conditions
return true. So while you can assume that the browser is offline when
it returns a false value, you cannot assume that a true value
necessarily means that the browser can access the internet. You could
be getting false positives, such as in cases where the computer is
running a virtualization software that has virtual ethernet adapters
that are always "connected." Therefore, if you really want to
determine the online status of the browser, you should develop
additional means for checking.