11 ms·

Heyoffline.js warns your users when their network becomes unreachable

109 points by wassago 14y ago

tunnuz 14y ago
Very cool!
- chacham15 14y ago
  Why do these comments get downvoted? Granted that they add no value except to the author, that is still a valuable thing.
  - frozenport 14y ago
    Its a cheap comment and may be misleading. If they can't explain why they like it, calling it cool is suspect.
jamespo 14y ago
works in chrome, doesn't work in an admittedly old firefox or IE8
- flux_w42 14y ago
  Same for me. Works perfectly in Chrome 23.0.1271.64 but not in Firefox 17.0, but tested on Ubuntu 12.04
- adam-a 14y ago
  The FF window.navigator.onLine event fires when you click the "Work offline" option in the menu, at least I think it used to. Just tried that and it didn't work either. I have been looking for a X-browser way to do this myself and the best I cam up with so far was to ping google.com with a XHR OPTIONS type request. Pretty ugly, but it works.
  - sdqali 14y ago
    Would not a better solution be to ping a resource on the application server rather than an external resource (in this case Google)? If the resource can't be pinged, it means either the user is offline or the app is down which are essentially the same thing for your app in most cases, while in your implementation, it could just mean Google.com is down (There is very low chance of this happening. Still..) EDIT: Made the second paragraph clearer.
  - stuaxo 14y ago
    Hm, I clicked 'work offline' in firefox and didn't see the demo page do anything - maybe I'm missing something.
    - adam-a 14y ago
      Yes, you're right. I know that that was the behaviour at some point in the past on OSX. But I tried just now on Windows, FF Nightly and saw nothing. Could be a change in FF, difference in os's, or something in the library. Not a very helpful comment I'm afraid.
- elliottcarlson 14y ago
  Didn't work for me in Chrome 22.0.1229.94 on Windows * Worked after I relaunched Chrome and updated to 23.0.1271.64
- sdqali 14y ago
  This library depends on the navigator.onLine spec. It does not work on Firefox as expected because it implements navigator.onLine differently from Chrome and IE. http://schalk-neethling.com/2011/05/navigator-online-and-the-differing-implementations-of-a-standard/ http://schalk-neethling.com/2011/05/navigator-online-and-the...
chrisacky 14y ago
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. 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]. 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? ...Unless your application is LAN-based , offline-heavy, or your have pixies that run around your office pulling out your network cable regularly * chuckles *. I'll explain, but please correct me if I am way off the mark. The project connects to the network events this.events = { network: ['online', 'offline'] }; These events fire from observing the attribute window.navigator.onLine This attribute returns true, when the system is connected to a network, but returns false when it isn't. The importance of this is that the attribute is inherently unreliable. A computer can be connected to a network without having Internet access. [2] This is a barebones minimal example that doesn't have the features you added: <!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> You can see the fiddle here: http://jsfiddle.net/3rRWK/ http://jsfiddle.net/3rRWK/ 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". [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
- shimms 14y ago
  It may not be 100% reliable, but coupled with other techniques (catching error 404s etc) this provides a nice way to inform the user that their connection to our application may be gone. For single page apps that use browser storage and sync to the remote periodically it is great to be able to inform the user that "Hey you're offline. You can keep using it, but your changes won't be available for others to see until you re-connect".
jbrooksuk 14y ago
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.
ubermensche 14y ago
This looks great - but that sub-headline is almost unreadable (too thin/too light) "Warn your users when their network etc." (Chrome OSX)
BaconJuice 14y ago
This is really cool. Thank you for sharing!
copypasteweb 14y ago
This should be a browser feature, extension or user script, not a website feature.
- tantalor 14y ago
  You might want a notification like this at the application level for the sake of consistency. For instance, Gmail's "Loading..." messages will also notify you when you have lost or gained a connection. Surely consistent messaging and notifications is better for the user. Chrome has a desktop notifications API, but that's only appropriate for certain types of messages, such as receiving a new email. In general, it's probably best to handle messaging at the application level.
philfreo 14y ago
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... (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(); }); }());
frozenport 14y ago
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.
- bradp 14y ago
  It's not a button, you actually have to disconnect from the internet for the demo.
  - matthuggins 14y ago
    Considering that it's right next to it an identically rendered element that IS a button, it definitely appears to be a button itself. The example page should be changed to prompt the user to disconnect in another manner so that visitors don't get confused.

109 points by wassago 14y ago

tunnuz 14y ago

Very cool!

chacham15 14y ago
Why do these comments get downvoted? Granted that they add no value except to the author, that is still a valuable thing.
- frozenport 14y ago
  Its a cheap comment and may be misleading. If they can't explain why they like it, calling it cool is suspect.

jamespo 14y ago

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

flux_w42 14y ago
Same for me. Works perfectly in Chrome 23.0.1271.64 but not in Firefox 17.0, but tested on Ubuntu 12.04
adam-a 14y ago
The FF window.navigator.onLine event fires when you click the "Work offline" option in the menu, at least I think it used to. Just tried that and it didn't work either. I have been looking for a X-browser way to do this myself and the best I cam up with so far was to ping google.com with a XHR OPTIONS type request. Pretty ugly, but it works.
- sdqali 14y ago
  Would not a better solution be to ping a resource on the application server rather than an external resource (in this case Google)? If the resource can't be pinged, it means either the user is offline or the app is down which are essentially the same thing for your app in most cases, while in your implementation, it could just mean Google.com is down (There is very low chance of this happening. Still..) EDIT: Made the second paragraph clearer.
- stuaxo 14y ago
  Hm, I clicked 'work offline' in firefox and didn't see the demo page do anything - maybe I'm missing something.
  - adam-a 14y ago
    Yes, you're right. I know that that was the behaviour at some point in the past on OSX. But I tried just now on Windows, FF Nightly and saw nothing. Could be a change in FF, difference in os's, or something in the library. Not a very helpful comment I'm afraid.
elliottcarlson 14y ago
Didn't work for me in Chrome 22.0.1229.94 on Windows * Worked after I relaunched Chrome and updated to 23.0.1271.64
sdqali 14y ago
This library depends on the navigator.onLine spec. It does not work on Firefox as expected because it implements navigator.onLine differently from Chrome and IE. http://schalk-neethling.com/2011/05/navigator-online-and-the-differing-implementations-of-a-standard/ http://schalk-neethling.com/2011/05/navigator-online-and-the...

chrisacky 14y ago

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. 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]. 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? ...Unless your application is LAN-based , offline-heavy, or your have pixies that run around your office pulling out your network cable regularly * chuckles *. I'll explain, but please correct me if I am way off the mark. The project connects to the network events this.events = { network: ['online', 'offline'] }; These events fire from observing the attribute window.navigator.onLine This attribute returns true, when the system is connected to a network, but returns false when it isn't. The importance of this is that the attribute is inherently unreliable. A computer can be connected to a network without having Internet access. [2] This is a barebones minimal example that doesn't have the features you added: <!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> You can see the fiddle here: http://jsfiddle.net/3rRWK/ http://jsfiddle.net/3rRWK/ 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". [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

shimms 14y ago
It may not be 100% reliable, but coupled with other techniques (catching error 404s etc) this provides a nice way to inform the user that their connection to our application may be gone. For single page apps that use browser storage and sync to the remote periodically it is great to be able to inform the user that "Hey you're offline. You can keep using it, but your changes won't be available for others to see until you re-connect".

jbrooksuk 14y ago

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.

ubermensche 14y ago

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

BaconJuice 14y ago

This is really cool. Thank you for sharing!

copypasteweb 14y ago

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

tantalor 14y ago
You might want a notification like this at the application level for the sake of consistency. For instance, Gmail's "Loading..." messages will also notify you when you have lost or gained a connection. Surely consistent messaging and notifications is better for the user. Chrome has a desktop notifications API, but that's only appropriate for certain types of messages, such as receiving a new email. In general, it's probably best to handle messaging at the application level.

philfreo 14y ago

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... (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(); }); }());

frozenport 14y ago

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.

bradp 14y ago
It's not a button, you actually have to disconnect from the internet for the demo.
- matthuggins 14y ago
  Considering that it's right next to it an identically rendered element that IS a button, it definitely appears to be a button itself. The example page should be changed to prompt the user to disconnect in another manner so that visitors don't get confused.