Checking internet connection using JavaScript

Question

PROBLEM

I want to show an alert if WiFi is off [i.e. no internet connection]. In my web page, I have a number of buttons, pop-ups etc. User can click anything when offline. But I want to show if there is a failure in API call. I can check navigator.onLine in each click. But I dont want to write number of function calls or lines. Is there any way to do it commonly using jQuery, JS, Ajax?

"ALERT should be shown when call fails which caused by an user action"

Like $.ajax with error. It shouldn't be bounded with any div/page.

Hi, I have tried the following:

navigator.onLine  // It works fine

I used the below one as mentioned. But it's not working.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.2.min.js"><\/script>')</script>

Links I have referred

Detect that the Internet connection is offline?

Check Internet connectivity with jquery

and a few more.

Any suggestions?

Do you know how to write a server-side request handler? If yes, then you could make an ajax call to it and examine the request to see if there were any connection errors, if no error was found the connection works. You would then have to have a timer to make these requests say once per minute or so, the shorter the interval the sooner you would find when your connection is down, but send too many and you will bog down your server. The reason to use a request handler rather then a full page is to have your server do as little work as possible just to respond to your "pings" — Snellface, Oct 10 '14 at 07:40
The other option, if you only target fairly modern browsers, that MIGHT work(i have never tried this) is to use websockets. They SHOULD (in the same way regular "desktop sockets") be able to tell you when their connection to your server is lost. What you would do is to have your page connect to your server via a websocket and just keep that connection alive, as long as the connection is still there you are "connected" to your server. If the connection is lost you retry the connection, if it fails you are offline, keep retrying until you get a connection again which means you are online again — Snellface, Oct 10 '14 at 07:42

score 2 · Answer 1 · answered Mar 18 '19 at 14:08

navigator.online checks if there is a network and don't check for internet. If you are connected to a network with no internet it will still return true

You can check using an ajax request to your domain

setInterval(function() {
  $.ajax({
    type: "HEAD",
    url: document.location.pathname + "?param=" + new Date(),
    error: function() {
      console.log(false);
    },
    success: function() {
      console.log(true);
    }
  });
}, 1000);

score 1 · Answer 2 · answered Oct 10 '14 at 07:49

1

You may use the native setInterval function here. For instance, inside your document.ready function, or perhaps somewhere else that gets loaded early when the page loads, use a set interval:

setInterval(callbackFunction:,1000/*<--run function every interval in ms*/);

and write your callback funciton (probably above the setInteraval) something like:

var callbackFunction = function(){
  if (navigator.online){
    //manipulate the DOM 
  }
};

Remember to put this in a document.ready() function if you manipulate the DOM, and also that the callback function, if defined outside of the setInterval() invocation, should probably be declared first.

answered Oct 10 '14 at 07:49

Ralph

305
1
6

1

I tried it. It works fine. But i want to invoke the function only when there is event triggered by the user. – Gibbs Oct 10 '14 at 07:58
@GopsAB put it inside the `onclick` or `onchange` event handler, then – Yvonne Aburrow Jun 08 '17 at 11:08
the suggested solution didn't work for me until I changed it to `navigator.onLine` (note capital L, a trap for the unwary) – Yvonne Aburrow Jun 08 '17 at 11:30

score 0 · Answer 3 · answered Apr 20 '20 at 04:38

I found the easiest way to check if connection to YouTube (for example) exists - to load some javascript lib from that site and check if it was loaded correctly:

Async loading of example lib (may be in script tag in your document):

var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

That script is less than 1kB. When you need to check it in your javascript, use the following:

if (window.YT) 
   ...

Checking internet connection using JavaScript

3 Answers3

Linked