Home Carbon Ads Detecting If Browser Is Online Or Offline Using JavaScript

Detecting If Browser Is Online Or Offline Using JavaScript

online-offline-detect-browser

This post is a part 20 of Advanced JavaScript APIs post series.

Sometimes it is necessary to detect if browser is online or offline before doing some task. Many developers use AJAX to detect browser connectivity status(online or offline) by sending a request to server. But this is a bad way of finding browser status as it requires bandwidth and can lead to bad user experience.

There is a direct way provided by browsers since a long time to detect browser connectivity status. Browsers provide navigator.onLine property to check if browser is online or offline. Its set to true if browser is online otherwise set to false.

Browsers also support online and offline events to notify the applications whenever the browser is goes offline or comes online.


online and offline events can also be attached to any specific HTML element.

Narayan Prusty
CSS For Multi-language WebsiteJavaScript ArrayBuffers And Typed Arrays
Comments: 10
  1. 4 years ago

    nice article…

    ReplyCancel
  2. O.B.
    4 years ago

    Does not work in Safari. Is there a workaround?

    ReplyCancel
  3. 4 years ago

    great post

    ReplyCancel
  4. Crystal
    4 years ago

    Just tried this in Safari 11.0 and it doesn’t work. This work for Chrome and Firefox though…

    ReplyCancel
  5. 5 years ago

    Thank you so much. This will very helpful for me….:)

    ReplyCancel
  6. Praful
    7 years ago

    Hi Narayan.. navigator.online is browser dependent and there is no consensus among all browsers. Additionally, it will not be able to detect whether user has internet access or not. For eg. VMWare Player has virtual network adapter enabled all the time which will give a false result to navigator.online. In such case, it will always be true.

    ReplyCancel
  7. Bhavesh Furia
    7 years ago

    AFAIK, navigator.onLine does not work in all browsers. Firefox treats online-offline differently. For more info, read the answer on following link : http://stackoverflow.com/questions/3181080/how-to-detect-online-offline-event-cross-browser

    ReplyCancel
    • 7 years ago

      I executed both the above codes in Firefox it works perfectly. Here is the proof that it works on all browsers http://www.w3schools.com/jsref/prop_nav_online.asp

      Please test the demo.

      Thanks.

      ReplyCancel
      • Bhavesh Furia
        7 years ago

        Yes, the demo works.

        So, “navigator.onLine” checks BROWSER going offline and not your SYSTEM going offline. Of-course, it cannot access SYSTEM being offline or not :)

        This confusion arose when I selected “Work Offline” option in “Firefox” and tested the same thing even though I was connected to internet.

        Thanks.

        ReplyCancel
      • William Ruthers
        7 years ago

        So according to the Stack Overflow link, Bhavesh Furia posted this does not work in all browsers e.g. Safari. Also the user may be on a local network and not be connected to the internet but this will still read as online. Thoush

        ReplyCancel

Leave a Reply

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

For more help see http://daringfireball.net/projects/markdown/syntax

Narayan Prusty

I am a software engineer specialising in Blockchain, DevOps and Go/JavaScript. This is my personal blog where I write about things that I learn and feel interesting to share.

Image8 years ago 10 Comments Web Development
Share this
Related Articles