Today I learnt something that I didn't know exist, so i'm actually really glad that you linked this project, it made me look for details on the spec/standard.<p>First of all, I looked through your code and couldn't understand how this was implemented. After I found it and researched, it's clear that it's essentially useless[1].<p>I'm not bashing on your project, I like it, but aside from being a cool gimmick, I can't think of any real world usages?<p>...Unless your application is LAN-based , offline-heavy, or your have pixies that run around your office pulling out your network cable regularly * chuckles *.<p>I'll explain, but please correct me if I am way off the mark.<p>The project connects to the network events<p><pre><code> this.events = {
network: ['online', 'offline']
};
</code></pre>
These events fire from observing the attribute<p><pre><code> window.navigator.onLine
</code></pre>
This attribute returns true, when the system is connected to a network, but returns false when it isn't.<p>The importance of this is that the attribute is inherently unreliable. A computer can be connected to a network without having Internet access. [2]<p>This is a barebones minimal example that doesn't have the features you added:<p><pre><code> <!DOCTYPE HTML>
<html>
<head>
<title>Online status</title>
<script>
function updateIndicator() {
document.getElementById('indicator').textContent =
navigator.onLine ? 'online' : 'offline';
}
</script>
</head>
<body onload="updateIndicator()" onoffline="updateIndicator()">
<p>The network is: <span id="indicator">(state unknown)</span>
</body>
</html>
</code></pre>
You can see the fiddle here: <a href="http://jsfiddle.net/3rRWK/" rel="nofollow">http://jsfiddle.net/3rRWK/</a><p>If you disconnect yourself from your network you will see the fiddle update to "Offline", however, if you pull your phone-line from your router, it will still stay at "Online".<p><pre><code> [1] : It's inherently unreliable.
A computer can be connected to a network without internet access.
[2] : http://www.whatwg.org/specs/web-apps/current-work/multipage/offline.html</code></pre>
If you want to roll your own UI (something less obtrusive, perhaps), this can be done in only a few lines of code. From our Backbone.js app...<p><pre><code> (function() {
var errorView = null;
$(window).on('online', function() {
if (errorView) errorView.close();
errorView = null;
});
$(window).on('offline', function() {
errorView = new ErrorView({ message: 'No internet connection.'});
errorView.render();
});
}());</code></pre>