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 the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.