Heyoffline.js warns your users when their network becomes unreachable

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> &#60;!DOCTYPE HTML&#62; &#60;html&#62; &#60;head&#62; &#60;title&#62;Online status&#60;/title&#62; &#60;script&#62; function updateIndicator() { document.getElementById('indicator').textContent = navigator.onLine ? 'online' : 'offline'; } &#60;/script&#62; &#60;/head&#62; &#60;body onload="updateIndicator()" onoffline="updateIndicator()"&#62; &#60;p&#62;The network is: &#60;span id="indicator"&#62;(state unknown)&#60;/span&#62; &#60;/body&#62; &#60;/html&#62; </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>

Looks good to me. We run an internal web app which relies on users being connected to a local server. This is perfect for my needs.

This looks great - but that sub-headline is almost unreadable (too thin/too light) "Warn your users when their network etc." (Chrome OSX)

I press the red button in the latest version of Firefox and nothing happens. The cursor doesn't change when I hover over the button.

This should be a browser feature, extension or user script, not a website feature.

This is really cool. Thank you for sharing!

works in chrome, doesn't work in an admittedly old firefox or IE8

Very cool!