5

Currently, I'm making a Cached iPhone-app with some features that require internet, and other features that don't. I'd like to know how to detect an internet connection with JavaScript, to make certain pages display a 'No Internet Connection' text, and others to work as normal.

George Peters
  • 51
  • 1
  • 2
  • I'm not sure if this could help with iPhone but there's a post similar to this on the site: http://stackoverflow.com/questions/2384167/check-if-internet-connection-exists-with-javascript – lakam99 May 08 '12 at 23:34

2 Answers2

11

In HTML5, you can use:

 navigator.onLine

to detect internet connectivity.

LIVE DEMO: http://jsfiddle.net/DerekL/fHQK4/

Derek 朕會功夫
  • 92,235
  • 44
  • 185
  • 247
  • Cleanest solution, right. Pity, that **it is not working**! According to [this](https://developer.mozilla.org/en-US/docs/Web/API/window.navigator.onLine#Browser_compatibility), [this](http://stackoverflow.com/a/2384227/1469208) and [this](http://stackoverflow.com/a/4813406/1469208), `navigator.onLine`, though being part of HTML5, **is correctly supported only in Chrome and WebKit-based browsers**! Other browsers returns `true` always or -- return `true` when `Work Offline` mode is disabled and `false` when it is enabled, regardless of actual connectivity. – trejder Aug 06 '13 at 13:25
  • I have veryfied this, using [a simple jsFiddle example](http://jsfiddle.net/Gajotres/VXWGG/1/), that I found (not mine). It works fine in Chrome, fails completely (always returning `true` since I haven't enabled `Work Offline`) in Firefox. I don't know, if this is working in IE, because... it hangs like a poor beggar, on any jsFiddle page (lame, lame browser)! :] If you want to have a reliable connection checking, you have to do an XHR request and check, if it fails. You'll find many examples in links, that I provide in my first comment. – trejder Aug 06 '13 at 13:26
  • @trejder - The native HTML5 method might not be widely-supported yet, but it does reduce the requests sent to your server. I suggest falling back to the old XHR method only if the client's browser does not support it. – Derek 朕會功夫 Aug 06 '13 at 21:59
  • @Derek朕會功夫 Great! How, then, would you like to test, if "client's browser" doesn't support it"? How will you distinguish, that Firefox returns `true` if `Work Offline` is not set (when actual connection might be down), from Chrome, that reports `true` only if there's a real connection to the Internet? You'll do checking for browser name? How will you tell, which browser does the same as Firefox and which acts like Chrome? Plus: Developers can't agree each other, what does it means to be "on-line" and this part of HTML5 specification is seen as buggy and unclear by many. – trejder Aug 07 '13 at 08:32
  • @Derek朕會功夫 Plus: I don't know, if this HTML5 method will be ever widely support? I found 2-3 years old posts saying, that implementation of this is buggy. If nothing changed for years (because browsers' developers can't agree what does it mean to be "online", though it is pretty clear for me), then I don't know, if we can expect that this will ever be cleared out and widely support. I'm using this technique only for local debugging (as I always use Chrome) and never in production app. – trejder Aug 07 '13 at 08:34
  • 1
    @trejder - Wow calm down. I get the idea that currently it is not widely supported. But the point is he is using it in a cached iPhone app. – Derek 朕會功夫 Aug 07 '13 at 20:35
  • @Derek朕會功夫 OK, sorry for overreacting! :] – trejder Aug 08 '13 at 10:10
  • navigator.onLine is not dependable in Chrome and Safari. read on mozdev. it returns true if you are connected to a LAN or a router. But that does not always mean you are online. – Poppe76 Oct 18 '19 at 12:46
  • @Poppe76 If you are connected to a router via LAN, that means you *are* connected to a network and that implies you are online. It doesn’t indicate if a specific address is reachable from your network if that’s what you mean. – Derek 朕會功夫 Oct 18 '19 at 13:33
0

You could make an iframe and set the src to google. If it doesn't trigger onload in a matter of seconds, they probably don't have internet.

mowwwalker
  • 16,634
  • 25
  • 104
  • 157
  • 1
    What if the user has slow internet and it takes a minute to load? – Derek 朕會功夫 May 08 '12 at 23:53
  • 1
    @Derek, That's true, but there's not much hope for an internet connection that takes more than a couple seconds to load ~600 bytes from the fastest servers in the world. Might as well not have internet. – mowwwalker May 09 '12 at 00:00