Detect the Internet connection is offline

Question

How to detect the Internet connection is offline in JavaScript

User · Answer

The HTML5 Application Cache API specifies navigator onLine  which is currently available in the IE8 betas  WebKit  eg  Safari  nightlies  and is already supported in Firefox 3

User · Answer

You can determine that the connection is lost by making failed XHR requests   The standard approach is to retry the request a few times   If it doesn t go through  alert the user to check the connection  and fail gracefully   Sidenote  To put the entire application in an  offline  state may lead to a lot of error-prone work of handling state   wireless connections may come and go  etc   So your best bet may be to just fail gracefully  preserve the data  and alert the user   allowing them to eventually fix the connection problem if there is one  and to continue using your app with a fair amount of forgiveness   Sidenote  You could check a reliable site like google for connectivity  but this may not be entirely useful as just trying to make your own request  because while Google may be available  your own application may not be  and you re still going to have to handle your own connection problem   Trying to send a ping to google would be a good way to confirm that the internet connection itself is down  so if that information is useful to you  then it might be worth the trouble   Sidenote  Sending a Ping could be achieved in the same way that you would make any kind of two-way ajax request  but sending a ping to google  in this case  would pose some challenges   First  we d have the same cross-domain issues that are typically encountered in making Ajax communications   One option is to set up a server-side proxy  wherein we actually ping google  or whatever site   and return the results of the ping to the app  This is a catch-22 because if the internet connection is actually the problem  we won t be able to get to the server  and if the connection problem is only on our own domain  we won t be able to tell the difference  Other cross-domain techniques could be tried  for example  embedding an iframe in your page which points to google com  and then polling the iframe for success failure  examine the contents  etc    Embedding an image may not really tell us anything  because we need a useful response from the communication mechanism in order to draw a good conclusion about what s going on   So again  determining the state of the internet connection as a whole may be more trouble than it s worth   You ll have to weight these options out for your specific app

User · Answer

You can use   ajax   s error callback  which fires if the request fails  If textStatus equals the string  timeout  it probably means connection is broken   function  XMLHttpRequest  textStatus  errorThrown         typically only one of textStatus or errorThrown       will have info   this     the options for this ajax request     From the doc      Error  A function to be called if the request   fails  The function is passed three   arguments  The XMLHttpRequest object    a string describing the type of error   that occurred and an optional   exception object  if one occurred    Possible values for the second   argument  besides null  are  timeout      error    notmodified  and    parsererror   This is an Ajax Event   So for example      ajax      type   GET      url   keepalive php      success  function msg        alert  Connection active             error  function XMLHttpRequest  textStatus  errorThrown           if textStatus     timeout                alert  Connection seems dead

User · Answer

window navigator onLine   is what you looking for  but few things here to add  first  if it s something on your app which you want to keep checking  like to see if the user suddenly go offline  which correct in this case most of the time  then you need to listen to change also   for that you add event listener to window to detect any change  for checking if the user goes offline  you can do   window addEventListener  offline          gt  console log  No Internet        and for checking if online   window addEventListener  online          gt  console log  Connected Internet

User · Answer

There are 2 answers forthis for two different senarios -   If you are using JavaScript on a website i e  or any front-end part  The simplest way to do it is          lt h2 gt The Navigator Object lt  h2 gt    lt p gt The onLine property returns true if the browser is online  lt  p gt    lt p id  demo  gt  lt  p gt    lt script gt    document getElementById  demo   innerHTML    navigator onLine is     navigator onLine   lt  script gt      But if you re using js on server side i e  node etc    You can determine that the connection is lost by making failed XHR requests   The standard approach is to retry the request a few times  If it doesn t go through  alert the user to check the connection  and fail gracefully

User · Answer

As olliej said  using the navigator onLine browser property is preferable than sending network requests and  accordingly with developer mozilla org En Online and offline events  it is even supported by old versions of Firefox and IE   Recently  the WHATWG has specified the addition of the online and offline events  in case you need to react on navigator onLine changes   Please also pay attention to the link posted by Daniel Silveira which points out that relying on those signal property for syncing with the server is not always a good idea

User · Answer

IE 8 will support the window navigator onLine property  But of course that doesn t help with other browsers or operating systems  I predict other browser vendors will decide to provide that property as well given the importance of knowing online offline status in Ajax applications  Until that happens  either XHR or an Image   or  lt img gt  request can provide something close to the functionality you want  Update  2014 11 16  Major browsers now support this property  but your results will vary  Quote from Mozilla Documentation   In Chrome and Safari  if the browser is not able to connect to a local area network  LAN  or a router  it is offline  all other conditions return true  So while you can assume that the browser is offline when it returns a false value  you cannot assume that a true value necessarily means that the browser can access the internet  You could be getting false positives  such as in cases where the computer is running a virtualization software that has virtual ethernet adapters that are always  quot connected  quot  Therefore  if you really want to determine the online status of the browser  you should develop additional means for checking  In Firefox and Internet Explorer  switching the browser to offline mode sends a false value  All other conditions return a true value

User · Answer

The HTML5 Application Cache API specifies navigator onLine  which is currently available in the IE8 betas  WebKit  eg  Safari  nightlies  and is already supported in Firefox 3

User · Answer

IE 8 will support the window navigator onLine property  But of course that doesn t help with other browsers or operating systems  I predict other browser vendors will decide to provide that property as well given the importance of knowing online offline status in Ajax applications  Until that happens  either XHR or an Image   or  lt img gt  request can provide something close to the functionality you want  Update  2014 11 16  Major browsers now support this property  but your results will vary  Quote from Mozilla Documentation   In Chrome and Safari  if the browser is not able to connect to a local area network  LAN  or a router  it is offline  all other conditions return true  So while you can assume that the browser is offline when it returns a false value  you cannot assume that a true value necessarily means that the browser can access the internet  You could be getting false positives  such as in cases where the computer is running a virtualization software that has virtual ethernet adapters that are always  quot connected  quot  Therefore  if you really want to determine the online status of the browser  you should develop additional means for checking  In Firefox and Internet Explorer  switching the browser to offline mode sends a false value  All other conditions return a true value

User · Answer

Just use navigator onLine if this is true then you re online else offline

User · Answer

IE 8 will support the window navigator onLine property  But of course that doesn t help with other browsers or operating systems  I predict other browser vendors will decide to provide that property as well given the importance of knowing online offline status in Ajax applications  Until that happens  either XHR or an Image   or  lt img gt  request can provide something close to the functionality you want  Update  2014 11 16  Major browsers now support this property  but your results will vary  Quote from Mozilla Documentation   In Chrome and Safari  if the browser is not able to connect to a local area network  LAN  or a router  it is offline  all other conditions return true  So while you can assume that the browser is offline when it returns a false value  you cannot assume that a true value necessarily means that the browser can access the internet  You could be getting false positives  such as in cases where the computer is running a virtualization software that has virtual ethernet adapters that are always  quot connected  quot  Therefore  if you really want to determine the online status of the browser  you should develop additional means for checking  In Firefox and Internet Explorer  switching the browser to offline mode sends a false value  All other conditions return a true value

User · Answer

There are 2 answers forthis for two different senarios -   If you are using JavaScript on a website i e  or any front-end part  The simplest way to do it is          lt h2 gt The Navigator Object lt  h2 gt    lt p gt The onLine property returns true if the browser is online  lt  p gt    lt p id  demo  gt  lt  p gt    lt script gt    document getElementById  demo   innerHTML    navigator onLine is     navigator onLine   lt  script gt      But if you re using js on server side i e  node etc    You can determine that the connection is lost by making failed XHR requests   The standard approach is to retry the request a few times  If it doesn t go through  alert the user to check the connection  and fail gracefully

User · Answer

Just use navigator onLine if this is true then you re online else offline

User · Answer

There are a number of ways to do this   AJAX request to your own website  If that request fails  there s a good chance it s the connection at fault  The JQuery documentation has a section on handling failed AJAX requests  Beware of the Same Origin Policy when doing this  which may stop you from accessing sites outside your domain  You could put an onerror in an img  like  lt img src  quot http   www example com singlepixel gif quot  onerror  quot alert  Connection dead    quot    gt    This method could also fail if the source image is moved   renamed  and would generally be an inferior choice to the ajax option  So there are several different ways to try and detect this  none perfect  but in the absence of the ability to jump out of the browser sandbox and access the user s net connection status directly  they seem to be the best options

User · Answer

window navigator onLine   is what you looking for  but few things here to add  first  if it s something on your app which you want to keep checking  like to see if the user suddenly go offline  which correct in this case most of the time  then you need to listen to change also   for that you add event listener to window to detect any change  for checking if the user goes offline  you can do   window addEventListener  offline          gt  console log  No Internet        and for checking if online   window addEventListener  online          gt  console log  Connected Internet

User · Answer

My way    lt  -- the file named  tt jpg  should exist in the same directory -- gt    lt script gt  function testConnection callBack        document getElementsByTagName  body   0  innerHTML              lt img id  testImage  style  display  none                src  tt jpg     Math random                     onerror  testConnectionCallback false                 onload  testConnectionCallback true    gt         testConnectionCallback   function result           callBack result            var element   document getElementById  testImage            element parentNode removeChild element                lt  script gt    lt  -- usage example -- gt    lt script gt  function myCallBack result        alert result      lt  script gt    lt a href   onclick testConnection myCallBack   gt Am I online  lt  a gt

User · Answer

My way    lt  -- the file named  tt jpg  should exist in the same directory -- gt    lt script gt  function testConnection callBack        document getElementsByTagName  body   0  innerHTML              lt img id  testImage  style  display  none                src  tt jpg     Math random                     onerror  testConnectionCallback false                 onload  testConnectionCallback true    gt         testConnectionCallback   function result           callBack result            var element   document getElementById  testImage            element parentNode removeChild element                lt  script gt    lt  -- usage example -- gt    lt script gt  function myCallBack result        alert result      lt  script gt    lt a href   onclick testConnection myCallBack   gt Am I online  lt  a gt

User · Answer

an ajax call to your domain is the easiest way to detect if you are offline    ajax         type   HEAD         url  document location pathname     param     new Date          error  function     return false           success  function     return true             this is just to give you the concept  it should be improved   E g  error 404 should still mean that you online

User · Answer

The problem of some methods like navigator onLine is that they are not compatible with some browsers and mobile versions  an option that helped me a lot was to use the classic XMLHttpRequest method and also foresee the possible case that the file was stored in cache with response XMLHttpRequest status is greater than 200 and less than 304   Here is my code    var xhr   new XMLHttpRequest       index php is in my web  xhr open  HEAD    index php   true    xhr send      xhr addEventListener  readystatechange   processRequest  false     function processRequest e         if  xhr readyState    4               If you use a cache storage manager  service worker   it is likely that the            index php file will be available even without internet  so do the following validation          if  xhr status  gt   200  amp  amp  xhr status  lt  304                 console log  On line                else                console log  Offline

User · Answer

You can use   ajax   s error callback  which fires if the request fails  If textStatus equals the string  timeout  it probably means connection is broken   function  XMLHttpRequest  textStatus  errorThrown         typically only one of textStatus or errorThrown       will have info   this     the options for this ajax request     From the doc      Error  A function to be called if the request   fails  The function is passed three   arguments  The XMLHttpRequest object    a string describing the type of error   that occurred and an optional   exception object  if one occurred    Possible values for the second   argument  besides null  are  timeout      error    notmodified  and    parsererror   This is an Ajax Event   So for example      ajax      type   GET      url   keepalive php      success  function msg        alert  Connection active             error  function XMLHttpRequest  textStatus  errorThrown           if textStatus     timeout                alert  Connection seems dead

User · Answer

You can try this will return true if network connected function isInternetConnected   return navigator onLine

User · Answer

Here is a snippet of a helper utility I have  This is namespaced javascript   network  function         var state   navigator onLine    online     offline       return state      You should use this with method detection else fire off an  alternative  way of doing this  The time is fast approaching when this will be all that is needed  The other methods are hacks

User · Answer

I know this question has already been answered but i will like to add my 10 cents explaining what s better and what s not  Window navigator onLine I noticed some answers spoke about this option but they never mentioned anything concerning the caveat  This option involves the use of  quot window navigator onLine quot  which is a property under Browser Navigator Interface available on most modern browsers  It is really not a viable option for checking internet availability because firstly it is browser centric and secondly most browsers implement this property differently   In Firefox  The property returns a boolean value  with true meaning online and false meaning offline but the caveat here is that  quot the value is only updated when the user follows links or when a script requests a remote page  quot  Hence if the user goes offline and you query the property from a js function or script  the property will always return true until the user follows a link  In Chrome and Safari  If the browser is not able to connect to a local area network  LAN  or a router  it is offline  all other conditions return true  So while you can assume that the browser is offline when it returns a false value  you cannot assume that a true value necessarily means that the browser can access the internet  You could be getting false positives  such as in cases where the computer is running a virtualization software that has virtual ethernet adapters that are always  quot connected quot    The statements above is simply trying to let you know that browsers alone cannot tell  So basically this option is unreliable  Sending Request to Own Server Resource This involves making HTTP request to your own server resource and if reachable assume internet availability else the user is offline  There are some few caveats to this option   No server availability is 100  reliant  hence if for some reason your server is not reachable it would be falsely assumed that the user is offline whereas they re connected to the internet  Multiple request to same resource can return cached response making the http response result unreliable   If you agree your server is always online then you can go with this option  Here is a simple snippet to fetch own resource     This fetches your website s favicon  so replace path with favicon url    Notice the appended date param which helps prevent browser caching  fetch   favicon ico d   Date now       then response   gt        if   response ok        throw new Error  Network response was not ok           At this point we can safely assume the user has connection to the internet         console log  quot Internet connection available quot             catch error   gt         The resource could not be reached         console log  quot No Internet connection quot   error          Sending Request to Third-Party Server Resource We all know CORS is a thing  This option involves making HTTP request to an external server resource and if reachable assume internet availability else the user is offline  The major caveat to this is the Cross-origin resource sharing which act as a limitation  Most reputable websites blocks CORS requests but for some you can have your way  Below a simple snippet to fetch external resource  same as above but with external resource url     Firstly you trigger a resource available from a reputable site    For demo purpose you can use the favicon from MSN website    Also notice the appended date param which helps skip browser caching  fetch  https   static-global-s-msn-com akamaized net hp-neu sc 2b a5ea21 ico d   Date now       then response   gt         Check if the response is successful     if   response ok        throw new Error  Network response was not ok        At this point we can safely say the user has connection to the internet         console log  quot Internet available quot             catch error   gt         The resource could not be reached         console log  quot No Internet connection quot   error          So  Finally for my personal project i went with the 2nd option which involves requesting own server resource because basically there are many factors to tell if there is  quot Internet Connection quot  on a user s device  not just from your website container alone nor from a limited browser api  Remember your users can also be in an environment where some websites or resources are blocked  prohibited and not accessible which in turn affects the logic of connectivity check  The best bet will be   Try to access a resource on your own server because this is your users environment  Typically i use website s favicon because the response is very light and it is not frequently updated   If there is no connection to the resource  simply say  quot Error in connection quot  or  quot Connection lost quot  when you need to notify the user rather than assume a broad  quot No internet connection quot  which depends on many factors

User · Answer

The HTML5 Application Cache API specifies navigator onLine  which is currently available in the IE8 betas  WebKit  eg  Safari  nightlies  and is already supported in Firefox 3

User · Answer

You can determine that the connection is lost by making failed XHR requests   The standard approach is to retry the request a few times   If it doesn t go through  alert the user to check the connection  and fail gracefully   Sidenote  To put the entire application in an  offline  state may lead to a lot of error-prone work of handling state   wireless connections may come and go  etc   So your best bet may be to just fail gracefully  preserve the data  and alert the user   allowing them to eventually fix the connection problem if there is one  and to continue using your app with a fair amount of forgiveness   Sidenote  You could check a reliable site like google for connectivity  but this may not be entirely useful as just trying to make your own request  because while Google may be available  your own application may not be  and you re still going to have to handle your own connection problem   Trying to send a ping to google would be a good way to confirm that the internet connection itself is down  so if that information is useful to you  then it might be worth the trouble   Sidenote  Sending a Ping could be achieved in the same way that you would make any kind of two-way ajax request  but sending a ping to google  in this case  would pose some challenges   First  we d have the same cross-domain issues that are typically encountered in making Ajax communications   One option is to set up a server-side proxy  wherein we actually ping google  or whatever site   and return the results of the ping to the app  This is a catch-22 because if the internet connection is actually the problem  we won t be able to get to the server  and if the connection problem is only on our own domain  we won t be able to tell the difference  Other cross-domain techniques could be tried  for example  embedding an iframe in your page which points to google com  and then polling the iframe for success failure  examine the contents  etc    Embedding an image may not really tell us anything  because we need a useful response from the communication mechanism in order to draw a good conclusion about what s going on   So again  determining the state of the internet connection as a whole may be more trouble than it s worth   You ll have to weight these options out for your specific app

User · Answer

You can determine that the connection is lost by making failed XHR requests   The standard approach is to retry the request a few times   If it doesn t go through  alert the user to check the connection  and fail gracefully   Sidenote  To put the entire application in an  offline  state may lead to a lot of error-prone work of handling state   wireless connections may come and go  etc   So your best bet may be to just fail gracefully  preserve the data  and alert the user   allowing them to eventually fix the connection problem if there is one  and to continue using your app with a fair amount of forgiveness   Sidenote  You could check a reliable site like google for connectivity  but this may not be entirely useful as just trying to make your own request  because while Google may be available  your own application may not be  and you re still going to have to handle your own connection problem   Trying to send a ping to google would be a good way to confirm that the internet connection itself is down  so if that information is useful to you  then it might be worth the trouble   Sidenote  Sending a Ping could be achieved in the same way that you would make any kind of two-way ajax request  but sending a ping to google  in this case  would pose some challenges   First  we d have the same cross-domain issues that are typically encountered in making Ajax communications   One option is to set up a server-side proxy  wherein we actually ping google  or whatever site   and return the results of the ping to the app  This is a catch-22 because if the internet connection is actually the problem  we won t be able to get to the server  and if the connection problem is only on our own domain  we won t be able to tell the difference  Other cross-domain techniques could be tried  for example  embedding an iframe in your page which points to google com  and then polling the iframe for success failure  examine the contents  etc    Embedding an image may not really tell us anything  because we need a useful response from the communication mechanism in order to draw a good conclusion about what s going on   So again  determining the state of the internet connection as a whole may be more trouble than it s worth   You ll have to weight these options out for your specific app

User · Answer

There are a number of ways to do this   AJAX request to your own website  If that request fails  there s a good chance it s the connection at fault  The JQuery documentation has a section on handling failed AJAX requests  Beware of the Same Origin Policy when doing this  which may stop you from accessing sites outside your domain  You could put an onerror in an img  like  lt img src  quot http   www example com singlepixel gif quot  onerror  quot alert  Connection dead    quot    gt    This method could also fail if the source image is moved   renamed  and would generally be an inferior choice to the ajax option  So there are several different ways to try and detect this  none perfect  but in the absence of the ability to jump out of the browser sandbox and access the user s net connection status directly  they seem to be the best options

User · Answer

IE 8 will support the window navigator onLine property  But of course that doesn t help with other browsers or operating systems  I predict other browser vendors will decide to provide that property as well given the importance of knowing online offline status in Ajax applications  Until that happens  either XHR or an Image   or  lt img gt  request can provide something close to the functionality you want  Update  2014 11 16  Major browsers now support this property  but your results will vary  Quote from Mozilla Documentation   In Chrome and Safari  if the browser is not able to connect to a local area network  LAN  or a router  it is offline  all other conditions return true  So while you can assume that the browser is offline when it returns a false value  you cannot assume that a true value necessarily means that the browser can access the internet  You could be getting false positives  such as in cases where the computer is running a virtualization software that has virtual ethernet adapters that are always  quot connected  quot  Therefore  if you really want to determine the online status of the browser  you should develop additional means for checking  In Firefox and Internet Explorer  switching the browser to offline mode sends a false value  All other conditions return a true value

User · Answer

if navigator onLine     alert  online       else     alert  offline

User · Answer

The HTML5 Application Cache API specifies navigator onLine  which is currently available in the IE8 betas  WebKit  eg  Safari  nightlies  and is already supported in Firefox 3

User · Answer

There are a number of ways to do this   AJAX request to your own website  If that request fails  there s a good chance it s the connection at fault  The JQuery documentation has a section on handling failed AJAX requests  Beware of the Same Origin Policy when doing this  which may stop you from accessing sites outside your domain  You could put an onerror in an img  like  lt img src  quot http   www example com singlepixel gif quot  onerror  quot alert  Connection dead    quot    gt    This method could also fail if the source image is moved   renamed  and would generally be an inferior choice to the ajax option  So there are several different ways to try and detect this  none perfect  but in the absence of the ability to jump out of the browser sandbox and access the user s net connection status directly  they seem to be the best options

User · Answer

an ajax call to your domain is the easiest way to detect if you are offline    ajax         type   HEAD         url  document location pathname     param     new Date          error  function     return false           success  function     return true             this is just to give you the concept  it should be improved   E g  error 404 should still mean that you online

User · Answer

You can try this will return true if network connected function isInternetConnected   return navigator onLine

User · Answer

There are a number of ways to do this   AJAX request to your own website  If that request fails  there s a good chance it s the connection at fault  The JQuery documentation has a section on handling failed AJAX requests  Beware of the Same Origin Policy when doing this  which may stop you from accessing sites outside your domain  You could put an onerror in an img  like  lt img src  quot http   www example com singlepixel gif quot  onerror  quot alert  Connection dead    quot    gt    This method could also fail if the source image is moved   renamed  and would generally be an inferior choice to the ajax option  So there are several different ways to try and detect this  none perfect  but in the absence of the ability to jump out of the browser sandbox and access the user s net connection status directly  they seem to be the best options

User · Answer

if navigator onLine     alert  online       else     alert  offline

User · Answer

The problem of some methods like navigator onLine is that they are not compatible with some browsers and mobile versions  an option that helped me a lot was to use the classic XMLHttpRequest method and also foresee the possible case that the file was stored in cache with response XMLHttpRequest status is greater than 200 and less than 304   Here is my code    var xhr   new XMLHttpRequest       index php is in my web  xhr open  HEAD    index php   true    xhr send      xhr addEventListener  readystatechange   processRequest  false     function processRequest e         if  xhr readyState    4               If you use a cache storage manager  service worker   it is likely that the            index php file will be available even without internet  so do the following validation          if  xhr status  gt   200  amp  amp  xhr status  lt  304                 console log  On line                else                console log  Offline

User · Answer

Here is a snippet of a helper utility I have  This is namespaced javascript   network  function         var state   navigator onLine    online     offline       return state      You should use this with method detection else fire off an  alternative  way of doing this  The time is fast approaching when this will be all that is needed  The other methods are hacks

User · Answer

I was looking for a client-side solution to detect if the internet was down or my server was down  The other solutions I found always seemed to be dependent on a 3rd party script file or image  which to me didn t seem like it would stand the test of time  An external hosted script or image could change in the future and cause the detection code to fail   I ve found a way to detect it by looking for an xhrStatus with a 404 code  In addition  I use JSONP to bypass the CORS restriction  A status code other than 404 shows the internet connection isn t working     ajax       url        https   www bing com aJyfYidjSlA    new Date   getTime       html       dataType   jsonp       timeout   5000       error  function xhr            if  xhr status    404                  internet connection working                   else                 internet is down  xhr status    0

User · Answer

I had to make a web app  ajax based  for a customer who works a lot with schools  these schools have often a bad internet connection I use this simple function to detect if there is a connection  works very well   I use CodeIgniter and Jquery   function checkOnline         setTimeout  doOnlineCheck     20000      function doOnlineCheck           if the server can be reached it returns 1  other wise it times out     var submitURL       base path   val      index php menu online          ajax           url   submitURL          type    post           dataType    msg           timeout   5000          success   function msg                if msg  1                        online   addClass  online                        online   removeClass  offline                  else                       online   addClass  offline                        online   removeClass  online                              checkOnline                       error   function                     online   addClass  offline                    online   removeClass  online                checkOnline

User · Answer

I had to make a web app  ajax based  for a customer who works a lot with schools  these schools have often a bad internet connection I use this simple function to detect if there is a connection  works very well   I use CodeIgniter and Jquery   function checkOnline         setTimeout  doOnlineCheck     20000      function doOnlineCheck           if the server can be reached it returns 1  other wise it times out     var submitURL       base path   val      index php menu online          ajax           url   submitURL          type    post           dataType    msg           timeout   5000          success   function msg                if msg  1                        online   addClass  online                        online   removeClass  offline                  else                       online   addClass  offline                        online   removeClass  online                              checkOnline                       error   function                     online   addClass  offline                    online   removeClass  online                checkOnline

User · Answer

request head in request error    ajax       url   your url      type   POST or GET       data  your data      success  function result           do stuff            error  function xhr  status  error             detect if user is online and avoid the use of async           ajax               type   HEAD               url  document location pathname              error  function                      user is offline  do stuff               console log  you are offline

User · Answer

I know this question has already been answered but i will like to add my 10 cents explaining what s better and what s not  Window navigator onLine I noticed some answers spoke about this option but they never mentioned anything concerning the caveat  This option involves the use of  quot window navigator onLine quot  which is a property under Browser Navigator Interface available on most modern browsers  It is really not a viable option for checking internet availability because firstly it is browser centric and secondly most browsers implement this property differently   In Firefox  The property returns a boolean value  with true meaning online and false meaning offline but the caveat here is that  quot the value is only updated when the user follows links or when a script requests a remote page  quot  Hence if the user goes offline and you query the property from a js function or script  the property will always return true until the user follows a link  In Chrome and Safari  If the browser is not able to connect to a local area network  LAN  or a router  it is offline  all other conditions return true  So while you can assume that the browser is offline when it returns a false value  you cannot assume that a true value necessarily means that the browser can access the internet  You could be getting false positives  such as in cases where the computer is running a virtualization software that has virtual ethernet adapters that are always  quot connected quot    The statements above is simply trying to let you know that browsers alone cannot tell  So basically this option is unreliable  Sending Request to Own Server Resource This involves making HTTP request to your own server resource and if reachable assume internet availability else the user is offline  There are some few caveats to this option   No server availability is 100  reliant  hence if for some reason your server is not reachable it would be falsely assumed that the user is offline whereas they re connected to the internet  Multiple request to same resource can return cached response making the http response result unreliable   If you agree your server is always online then you can go with this option  Here is a simple snippet to fetch own resource     This fetches your website s favicon  so replace path with favicon url    Notice the appended date param which helps prevent browser caching  fetch   favicon ico d   Date now       then response   gt        if   response ok        throw new Error  Network response was not ok           At this point we can safely assume the user has connection to the internet         console log  quot Internet connection available quot             catch error   gt         The resource could not be reached         console log  quot No Internet connection quot   error          Sending Request to Third-Party Server Resource We all know CORS is a thing  This option involves making HTTP request to an external server resource and if reachable assume internet availability else the user is offline  The major caveat to this is the Cross-origin resource sharing which act as a limitation  Most reputable websites blocks CORS requests but for some you can have your way  Below a simple snippet to fetch external resource  same as above but with external resource url     Firstly you trigger a resource available from a reputable site    For demo purpose you can use the favicon from MSN website    Also notice the appended date param which helps skip browser caching  fetch  https   static-global-s-msn-com akamaized net hp-neu sc 2b a5ea21 ico d   Date now       then response   gt         Check if the response is successful     if   response ok        throw new Error  Network response was not ok        At this point we can safely say the user has connection to the internet         console log  quot Internet available quot             catch error   gt         The resource could not be reached         console log  quot No Internet connection quot   error          So  Finally for my personal project i went with the 2nd option which involves requesting own server resource because basically there are many factors to tell if there is  quot Internet Connection quot  on a user s device  not just from your website container alone nor from a limited browser api  Remember your users can also be in an environment where some websites or resources are blocked  prohibited and not accessible which in turn affects the logic of connectivity check  The best bet will be   Try to access a resource on your own server because this is your users environment  Typically i use website s favicon because the response is very light and it is not frequently updated   If there is no connection to the resource  simply say  quot Error in connection quot  or  quot Connection lost quot  when you need to notify the user rather than assume a broad  quot No internet connection quot  which depends on many factors

User · Answer

I think it is a very simple way   var x   confirm  Are you sure you want to submit     if  x      if  navigator onLine    true        return true        alert  Internet connection is lost      return false    return false

User · Answer

As olliej said  using the navigator onLine browser property is preferable than sending network requests and  accordingly with developer mozilla org En Online and offline events  it is even supported by old versions of Firefox and IE   Recently  the WHATWG has specified the addition of the online and offline events  in case you need to react on navigator onLine changes   Please also pay attention to the link posted by Daniel Silveira which points out that relying on those signal property for syncing with the server is not always a good idea

User · Answer

You can determine that the connection is lost by making failed XHR requests   The standard approach is to retry the request a few times   If it doesn t go through  alert the user to check the connection  and fail gracefully   Sidenote  To put the entire application in an  offline  state may lead to a lot of error-prone work of handling state   wireless connections may come and go  etc   So your best bet may be to just fail gracefully  preserve the data  and alert the user   allowing them to eventually fix the connection problem if there is one  and to continue using your app with a fair amount of forgiveness   Sidenote  You could check a reliable site like google for connectivity  but this may not be entirely useful as just trying to make your own request  because while Google may be available  your own application may not be  and you re still going to have to handle your own connection problem   Trying to send a ping to google would be a good way to confirm that the internet connection itself is down  so if that information is useful to you  then it might be worth the trouble   Sidenote  Sending a Ping could be achieved in the same way that you would make any kind of two-way ajax request  but sending a ping to google  in this case  would pose some challenges   First  we d have the same cross-domain issues that are typically encountered in making Ajax communications   One option is to set up a server-side proxy  wherein we actually ping google  or whatever site   and return the results of the ping to the app  This is a catch-22 because if the internet connection is actually the problem  we won t be able to get to the server  and if the connection problem is only on our own domain  we won t be able to tell the difference  Other cross-domain techniques could be tried  for example  embedding an iframe in your page which points to google com  and then polling the iframe for success failure  examine the contents  etc    Embedding an image may not really tell us anything  because we need a useful response from the communication mechanism in order to draw a good conclusion about what s going on   So again  determining the state of the internet connection as a whole may be more trouble than it s worth   You ll have to weight these options out for your specific app

User · Answer

I think it is a very simple way   var x   confirm  Are you sure you want to submit     if  x      if  navigator onLine    true        return true        alert  Internet connection is lost      return false    return false

User · Answer

request head in request error    ajax       url   your url      type   POST or GET       data  your data      success  function result           do stuff            error  function xhr  status  error             detect if user is online and avoid the use of async           ajax               type   HEAD               url  document location pathname              error  function                      user is offline  do stuff               console log  you are offline

User · Answer

I was looking for a client-side solution to detect if the internet was down or my server was down  The other solutions I found always seemed to be dependent on a 3rd party script file or image  which to me didn t seem like it would stand the test of time  An external hosted script or image could change in the future and cause the detection code to fail   I ve found a way to detect it by looking for an xhrStatus with a 404 code  In addition  I use JSONP to bypass the CORS restriction  A status code other than 404 shows the internet connection isn t working     ajax       url        https   www bing com aJyfYidjSlA    new Date   getTime       html       dataType   jsonp       timeout   5000       error  function xhr            if  xhr status    404                  internet connection working                   else                 internet is down  xhr status    0

User · Answer

Almost all major browsers now support the window navigator onLine property  and the corresponding online and offline window events  window addEventListener  online        gt  console log  came online     window addEventListener  offline        gt  console log  came offline      Try setting your system or browser in offline online mode and check the console or the window navigator onLine property for the value changes  You can test it on this website as well  Note however this quote from Mozilla Documentation   In Chrome and Safari  if the browser is not able to connect to a local area network  LAN  or a router  it is offline  all other conditions return true  So while you can assume that the browser is offline when it returns a false value  you cannot assume that a true value necessarily means that the browser can access the internet  You could be getting false positives  such as in cases where the computer is running a virtualization software that has virtual ethernet adapters that are always  quot connected  quot  Therefore  if you really want to determine the online status of the browser  you should develop additional means for checking  In Firefox and Internet Explorer  switching the browser to offline mode sends a false value  Until Firefox 41  all other conditions return a true value  since Firefox 41  on OS X and Windows  the value will follow the actual network connectivity    emphasis is my own  This means that if window navigator onLine is false  or you get an offline event   you are guaranteed to have no Internet connection  If it is true however  or you get an online event   it only means the system is connected to some network  at best  It does not mean that you have Internet access for example  To check that  you will still need to use one of the solutions described in the other answers  I initially intended to post this as an update to Grant Wagner s answer  but it seemed too much of an edit  especially considering that the 2014 update was already not from him

User · Answer

Almost all major browsers now support the window navigator onLine property  and the corresponding online and offline window events  window addEventListener  online        gt  console log  came online     window addEventListener  offline        gt  console log  came offline      Try setting your system or browser in offline online mode and check the console or the window navigator onLine property for the value changes  You can test it on this website as well  Note however this quote from Mozilla Documentation   In Chrome and Safari  if the browser is not able to connect to a local area network  LAN  or a router  it is offline  all other conditions return true  So while you can assume that the browser is offline when it returns a false value  you cannot assume that a true value necessarily means that the browser can access the internet  You could be getting false positives  such as in cases where the computer is running a virtualization software that has virtual ethernet adapters that are always  quot connected  quot  Therefore  if you really want to determine the online status of the browser  you should develop additional means for checking  In Firefox and Internet Explorer  switching the browser to offline mode sends a false value  Until Firefox 41  all other conditions return a true value  since Firefox 41  on OS X and Windows  the value will follow the actual network connectivity    emphasis is my own  This means that if window navigator onLine is false  or you get an offline event   you are guaranteed to have no Internet connection  If it is true however  or you get an online event   it only means the system is connected to some network  at best  It does not mean that you have Internet access for example  To check that  you will still need to use one of the solutions described in the other answers  I initially intended to post this as an update to Grant Wagner s answer  but it seemed too much of an edit  especially considering that the 2014 update was already not from him

[javascript] Detect the Internet connection is offline?

Examples related to javascript

Examples related to ajax

Examples related to offline

Examples related to connectivity

Examples related to internet-connection