Just because the browser is online or offline does not mean that the network connection is. There can be all sorts of connectivity problems between your browser and a website that the navigator.onLine property and the online and offline events will not respond to. The only way to counter this is to use the Ajax core library, XMLHttpRequest(), to actually query the website and test for network connectivity in your JavaScript code.

For this to happen, you need to listen for the existing online and offline events. When the browser is online, test the network. When it is offline, the network is lost:

 addEventListener('online', testNetwork, false); addEventListener('offline', lostNetwork, false); function testNetwork() ...

Get HTML5: Your visual blueprint™ for designing rich web pages and applications now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.