checknet: My jQuery plugin for detecting Internet connection

Update log
v1.6 (Feb 2013): Improved checking performance/bandwidth usage. Thanks Kematzy for your suggestion. Note: running the demo file of your desktop will continually display the connection warning, it needs to be on a webserver to work correctly.

v1.5 (Nov 2012): Fixed issue where checking was not resumed after the window/tab was moved back to the front after being minimised or behind another tab.

v1.4 (Oct 2012): Fixed issue where the config setting “checkInterval” was not being applied when specified manually by users. Note: this needs to be given in milliseconds.

v1.3 (Aug 2012): Changed main checknet function to accept an object of arguments, like $.fn.checknet(configObject), instead of a comma separated list, like $.fn.checknet(‘arg1′, ‘arg2′) – the latter won’t work any more. Inside the main function, this arguments object becomes part of the “checknet” global object, so you can now set checknet.config properties like checknet.config.checkInterval and checknet.config.warnMsg after calling the function initially inside your $(document).ready();. checknet.config.checkURL is still in there, in case for some wild reason you need to be able to attempt cross-domain requests, but I do not recommended that you customise this.

v1.2 (July 2012): Implemented “checknet” global object, for use in your own JavaScript/jQuery. eg: if(checknet.conIsActive){//do something if the connection is active}; Enter “checknet” in your js console to see what properties it has. All references to “checknet” are now lowercase, not as previously, where some references used camelCase (like this: “checkNet”).

v1.1 (July 2012): Detects inactivity at the user’s end (if browser supports the “page visibility API”), suspends checking when the user is inactive (to save bandwidth and prevent uneccesary http requests). Corrected errors where disconnection was not detected in some cases (after connection had been disabled and then re-enabled).

Introduction
checknet is a plugin for the jQuery JavaScript library which, when used on a webpage, will detect if the internet connection is lost and add a warning to the top of the page. Amongst other uses, this could be useful for your site’s users if they have to enter any significant amounts of data before submitting a form (we’ve all had that annoying situation where you type something up and then lose it all when the form doesn’t submit properly!)

Demo
You can view the demo at http://tomriley.net/checknet/
Load the page, then disable your internet connection (possibly by unplugging the network cable of your computer, or setting your device to “Airplane mode”). After a few seconds you will see a warning message appear at the top of the page, and the form’s submit button will be disabled. Re-activate your internet connection and you will see that the warning dissapears and the submit button is re-enabled.

Useage
To use the plugin on your page, first download the zip file from http://tomriley.net/checknet/checknet.zip
Place the checknet.css and checknet-1.3.min.js file in the location you are using for those file types on your site. I use /css/ and /js/ but you may have your own preference. The index.html file is there for demo purposes only, and for you to look at the code of to see how to use the plugin on your HTML files.

Inside the <head></head> tags of your site’s HTML files, add these lines of code:

<link rel=”stylesheet” href=”css/checknet.css” media=”all” />
<script src=”js/checknet-1.3.min.js”></script>
<script>
  $(document).ready(function(){
    $.fn.checknet();
  });
</script>

If you put the checknet.css and checknet-1.3.min.js files in different locations than /css/ and /js/, you will need to change the references to where you put them. Also, if you already have a $(document).ready() listener on your page, you can put the $.fn.checknet(); line in there rather than adding another $(document).ready().

This all assumes that you already have jQuery included on your page. If you don’t, you can get instructions for using it from http://jquery.com/

Optional Parameters
After you call the $.fn.checknet() function, you have the option of then defining parameters in checknet’s configuration object which specify the interval between checking the connection (in  seconds) and the message which appears to warn users when connection is not present. If you do not specify anything, the default is to check the connection at an interval of 5 seconds and for the warning text to be “No Internet connection detected, disabled features will be re-enabled when a connection is detected.”. You can read about these settings under “How it works” below. To specify an interval of 10 seconds, you would call the function like this:

$.fn.checknet();
checknet.config.checkInterval = 1000;

To specify a check interval of 10 seconds, and set the warning message to “There is no connection!!”, you would call the function like this:

$.fn.checknet();
checknet.config.checkInterval = 1000;
checknet.config.warnMsg = “There is no connection!!”;

It’s also worth noting that the warning message has the id ‘netWarn’, and that disabled submit buttons have the temporary class ‘tempDisabled’ while there is no connection detected – you can target these with your own CSS if you wish to customise them further (like, say, giving disabled buttons a red border or something?)

How it works
The plugin works by doing an AJAX request to the current URL at set intervals to test the connection. If the page’s current URL is unavailable, the plugin assumes that Internet connectivity has been lost and adds the error message and disables inputs with type=”submit”. If the URL is available, it removes any error message and removes the disabled attribute from submit buttons. When looking into detecting internet connection with JavaScript, I discovered that many people have different opinions on the best way to do this effectively. JavaScript has the navigator.onLine property in more recent browsers, but I decided that testing the current URL was a better option and would allow for more flexability and give more consistent accurate results. The URL to test has been set by default to the current page href (because the user has already loaded it once, giving us a point of reference).

Permission to use
You can use the plugin for personal or commercial purposes as long as you give a link to tomriley.net or 3rdwavemedia.com in your code/comments. I’d love to hear from anyone who’s using this, whether you have suggestions on how to improve it or just want to give some feedback – show me what you’re making!

  1. Bhuvana says:

    Hi,

    Great post and it was much helpful!

    A small correction!.
    For setting 10 seconds you mentioned
    checknet.config.checkInterval = 1000;
    which is not the case.

    to set 10 sec interval
    checknet.config.checkInterval = 10000;
    (ref: http://www.w3schools.com/jsref/met_win_settimeout.asp)

    Please update it. If possible!

  2. Johne807 says:

    Hi, Neat post. There’s a problem with your website in internet explorer, would test this IE still is the market leader and a good portion of people will miss your great writing due to this problem. ddkagadceebb

  3. nosize says:

    Hello Tom,
    does olnine in your case mean the client must have internet connection or online could also mean must have access to an internal network for instance which may not necessarily have internet.

    I’m asking because i need to implement your solution such that online could mean both cases, so that users on the network but without internet connection are online and can access the application. Also please send me the un-minified version too please :)

  4. Tony says:

    Hi,

    Would it be possible to get a copy of the non-minified version of the code? I’m keen to use the portion of the code that detects connectivity but want to handle the event handling in my own way.

    Thanks,
    Tony

    • Milka says:

      National Memory Screening DayFree, confidential mermoy screenings for anyone concerned about mermoy loss and early Alzheimer’s disease detection and intervention, sponsored by Visiting Angels in cooperation with the Alzheimer’s Foundation of America.WHEN:Tuesday November 13 2012Noon 4pmWHERE:Avalon Missionary Church. 1212 Lower Huntington Rd. Fort Wayne IN 46819INFO:National Memory Screening Day is an annual initiative of the Alzheimer’s Foundation of America (AFA). Visiting Angels is proud to be a partner in this important first step in finding out if someone has a mermoy problem, and in helping patients and families become aware of the resources and assistance that is available.While a mermoy screening is not a substitute for a consultation with a physician, it can help to determine whether additional testing is warranted. With as many as 5.1 million Americans living with Alzheimer’s disease, and many more with mild cognitive impairment and dementia, early detection and intervention can be critical to making informed decisions for greater health and quality of life.For more information on mermoy screening and resources to assist with ageing in place, cognitive impairment, mild dementia, or Alzheimer’s disease, contact Visiting Angels at 260-482-CARE (2273).

  5. charan says:

    plz forward the code regarding find bandwidth by java script.

  6. balaji says:

    Thanks regard’s balaji

  7. Eleanor says:

    I have read some just right stuff here. Certainly value bookmarking for revisiting.
    I surprise how a lot attempt you set to make this sort of
    magnificent informative site.

  8. Russ says:

    Will this work on https (secure) website?

  9. Great Script :) good job

  10. Stephan says:

    Hey Tom,

    Thanks for the great tutorial and plugin, I’m kinda new to jquery but i’m catching on. What I wanted to know was if this can be used as a network checker say for instance you’re a web host, and you would like to display if your network is experiencing any problems, and in the case it is to display a different img or message. Or am I looking for something very different. here is a link to what I’m trying to accomplish http://www.afrihost.co.za, they have a network status at the top.

    Thanks again for a great post!

    Regards

    • Tom says:

      Hi Stephan, unfortunately checknet isn’t really the tool you are looking for to do this. This is front-end code that runs in people’s browsers to check the connection and you really need a back-end solution that will run on your servers. Good luck!

  11. solo says:

    amazing tutorial anda plugins.. its works great.. thank you so much.. been hours looking for this kind of tuts

  12. Septiyo says:

    Hi,

    Thanks a lot, it Work
    at first I try use it in my localhost using XAMPP, but it dont work, after I use on Hosting, it work Great.

    thanks

  13. Derek says:

    Hey Tom,
    First of all, thanks to your site and to stackoverflow to let me find out that piece of code.
    Do you mind sharing the non-mini version of the code ?
    Also, rather than disable some input on the page, I’d like to redirect to a webpage when Internet connection is detected.
    Let me know :)

    Cheers!
    dw.

  14. William says:

    Nice work with this script. However I need some advice in how to use it in my current project. While this script is ideal for disabling forms, I need to redirect to:

    window.location.href=”about:blank”;

    Hope that you can advise.

    • Tom says:

      Hi William, at the moment there is no callback fired when the connection drops or resumes, this is a feature that will be in a later version. Until I can do that, you’d need to do something like use setInterval() to continually check if checknet.conIsActiveand redirect if false.

  15. Shinu K Narayanan says:

    Hi,
    Thanks for your awesome plugin. Its very helpful..!

  16. Hariprasad says:

    Wow… Great… Really helps us..

  17. Vipil says:

    Great work buddy … it really helped us ………

  18. Jose says:

    Hi, Tom, your plugin it`s simply excelent, but I have a question, when the conection return, can reload the page?
    How I do?
    Thanks.Regards

    • Tom says:

      Hi Jose, in a later version I’m planning an event to be fired which can be used for running specific code when the connection drops or resumes. Until I have time to build that, you can use your own code to continually check the checknet.conIsActive property using the JavaScript setInterval() function and run another function depending on if it’s true or false – hope that makes sense.

  19. Hello tom Thanks For the Great Plug in. This plugin does not work on local Machine. Any Suggestions….

    • Tom says:

      Hi Vishnu, what is it about the plugin that doesn’t work? It is very common for the plugin to not detect lost connection on local dev environments. When you upload to a webserver on the Internet, it should behave the way it’s supposed to. Hope that helps!

    • Tom, i am just testing this in my jquery mobile website. but this is not working with jQuery Mobile website. Please Help…

  20. Dany says:

    Hi,
    Thank you for the great plugin.
    Just one request/question

    Is there a callback function when there is no connection ?
    For example if i want in addition to the message disable all clicks, or put an overlay on all the screen.

    Thank you

    • Tom says:

      Hi Dany, there is not currently a callback when connections drops, but that’s a great idea and I’ll incorporate it into the next version, whenever that may be ;) . There is currently a property in the global “checknet” object called “conIsActive” which is always either true or false. You can write your own js to check that property at rapid intervals and act accordingly. Not the best solution, but it should do what you want. Let me know if you need a hand writing that code. Thanks for using the plugin!

  21. KC says:

    Tom,

    Our checknet application is a landing page for people who register on our network.

    While unregistered, their device can only talk to the registration webserver. Once registered, their connectivity changes, and their device can talk to our public facing webservers and the Internet.

    Your checknet is working great in default mode where the URL is on the registration server, say:

    http://register.pepperdine.edu/checknet.html

    However, if I set

    checknet.config.checkURL = “public.pepperdine.edu/success.htm”;

    even though http://public.pepperdine.edu/success.htm can be loaded by the device when I type in that URL, checknet returns an error.

    What am I doing wrong?

    KC

    • Tom says:

      Hi KC, it sounds like an issue with Same-origin policy. If you specify a new checkURL, it needs to be the same protocol, port and host as the page checknet is running on – a different subdomain counts as a different host so the check will fail.

      So, you could point to a different file or directory, but it needs to be the same domain. This is a browser security feature so I can’t get around it with the plugin…

      I hope you find a solution, thanks for using it!

  22. Dileep says:

    Hi Tom ,

    Thanks for a nice plugin. But i have a note/feature_request.

    Currently it checking the connection status in N seconds by doing an ajax HEAD call , which is fine for smaller projects.

    But i have my own polling running on my pages. Doing some extra ajax calls only for network detection is not possible for me.

    so instead of the PLUGIN_AJAX_CALLS can i use the already running ajax_calls ? ( make it optional )

    The idea is trace ajax calls on web page and find the network status from that.

    or is there any other ideas ?

    Please let me know.

    Thanks
    Dileep

  23. dev says:

    Hi, Tom. Considering my self as lucky to land on your page. thanks to stackoverflow. currently i am working on a mini social networking webpage and though of incorporate this plugin. its great and i love it. however its not how i want it to be in my page. I want to disable all links if there is no connection (with or without notice, not even the timeout function). can you tweak a bit for me so that it will fire when user clicks on a link?

    With thanks

    • Tom says:

      Hi dev, really glad you got in touch. The plugin sets a global variable on the page called checknet.conIsActive that is always true when there’s a connection or false when there’s no connection. That means you can refer to that variable in any JS or jQuery you write. I haven’t tested this code, but you could achieve what you want by adding something like this:

      $(‘a’).on(‘click’,function(e){
      if( checknet.conIsActive == false ){
      e.preventDefault();
      //optionally write code here to run when user clicks a disabled link
      };
      });

      Basically that adds a click listener to all links that will prevent the browser following the link if the connection is currently disabled.

  24. Donavon says:

    Just started using this on an internal app that I wrote for my day job. For me, this assists in situations where a connection drops to handheld scanners used for inventory and order management in our warehouses.

    Everything appears to work great thus far, but I do have one issue. When loading a page that uses this function, for a split second the no network connection message appears. Is it possible to get around this? Not a big deal if it can’t be done, but having it appear throws off our not so tech savvy users when they see it…even after explaining that it is ‘normal.’

    • Tom says:

      Hi Donavon, the demo page doesn’t do this, so I’d suggest trying these things to prevent what’s happening:

      Make sure you are using the exact files jquery.checknet-1.6.min.js for checknet and jquery-1.9.1.min.js for jquery
      Make sure you are calling the checknet function inside a document ready like this:
      $(document).ready(function(){
      $.fn.checknet();
      });

      If that doesn’t work, you could send me a link and I’ll have a look. It’s a bit strange considering that the warning message doesn’t even exist in the DOM until it detects a problem, and the “conIsActive” property is true by default.

      • Donavon says:

        Hi Tom. I couldn’t find your email address anywhere on the site so if you could email me that would be great! I’ll reply with some of my code.

        In testing, it appears that it doesn’t *always* happen. I’m using the function properly with the same code in your example (and your reply above) and the correct files included in your ZIP.

        You only notice this when there is a load on a page…by load I mean heft. For very small/quick page loads, the issue doesn’t occur. The problem is when it takes a couple of seconds or more.

        Here’s what I think is happening:

        I left the timing at the default of 5 seconds so my hunch is that because the page hasn’t loaded by the time this timer ‘resets’ then the no connection error appears. When the page is loaded it goes away. I can exacerbate the problem by adjusting the time (e.g. checknet.config.checkInterval = 100;).

        • Tom says:

          Donavon, I think your hunch is correct. However, the $(document).ready(); is supposed to make sure it runs only when the page has finished loading. Can you ensure it’s the last thing on your html before the closing tag? If you have async=”true”on any other script tags, try removing the async parameter so they have to finish before moving on with loading the page.

          A quick-n-dirty solution might be to set checknet.config.checkInterval to 10000 (10sec) or 1500 (15sec). That should give the page more time to load, only there’s a risk that it will check the connection once before that setting is applied and add the warning. Putting a setTimeout around the $.fn.checknet would allow you to add a delay of your choice before it runs the first time – maybe try that?

          If there’s still a problem, email the code to tom@tomriley.net and I will have a look at it. Cheers!

  25. Pete Butler says:

    Hi, Tom.

    This is a really cool plugin; thanks for making it available. I do have one question: do you have a non-minimized version of the source code you’d be willing to make available?

    I need to tweak it to get it to do exactly what I want it to, but as a relative jQuery neophyte, a single line of one-letter functions is kinda tricky to work with. :-) Also, I (and, I suspect, my boss) would be more comfortable including it in my code if how it works was a little clearer.

    If not, no worries; I’m sure I’ll sort it out.

    Thanks again,
    – Pete

    • Tom says:

      Hi Pete, I just emailed you!

      • Anton Krall says:

        Tom, I also would like to have a non mini version of your script because I would like to put it on a template I got and I need to modify it to use the modals it comes with.

        Thx!

      • Bill says:

        Cool code. I’d like to make a few changes to what it does when there’s no connection and a couple other things and it sure would be nice to have the full, non-minimized version. Can you also send it to me? Thanks.

  26. Kematzy says:

    Hi Tom,

    Thanks for your script. I’m using in a tiny internal web app I’m working on.

    I would recommend one tiny BIG change, which is this addition to the e.ajax() call:

    type: “HEAD”,

    When polling connection, there’s no need to request the entire page, as we only need to verify if connection is live. The HEAD request will provide sufficient proof that the connection is live.

    Also, I would strongly recommend users to poll a special URL on the domain instead of the current page, like this:

    $.fn.checknet({
    checkURL: location.protocol + ‘//’ + location.host + “/is-connection-alive” // returns “” only
    });

    The reason for this is to reduce the server load. Imagine you are viewing a page that requires considerable resources to generate, DB queries etc, and now CheckNet is by default polling this page every 5 seconds. That’s a waste of resources.

    By giving a special ULR on the domain that requires only minimal processing time, we still achieve our intended result while saving server resources and bandwidth.

    Just my 2 cents worth of thoughts ;-)

    • Tom says:

      Kematzy, thanks for the great comment. Requesting the whole page has been my biggest concern all along as I did not know about the type: “HEAD” parameter you mentioned – I will definitely look into incorporating this into a new release soon. I deliberately avoided using a special URL for checking for ease of set up and to reduce the explanation of use, however, users can absolutely provide a specific URL that is on their server if they wish. The functionality is already there and I have written a bit about that in the blog post. Regarding server load, the plugin does stop checking if the window is not active/minimised etc, and then resumes when the user comes back to the window.

      Thanks a lot for your suggestion, it is genuinely helpful. If you feel like sharing, I’d love to see what you are using it for. I’ll update tjis comment when a I release a new version.

    • Tom says:

      Hi again, I’ve just uploaded v1.6, which incorporates your idea of using type: ‘HEAD’ – thanks for the suggestion :)

  27. Anand says:

    Its not working on Firefox on Mac. It works perfect otherwise.

    • Anand says:

      Also, on Mac, in Chrome, if window is not on focus, this stops working. I tested with http://tomriley.net/checknet/
      This seems to be unreliable at this point unless proper testing is done and modifications are made.

      • Tom says:

        Thanks for the feedback, Anand. The plugin temporarily disables checking when the current window/tab is not at the front/maximised. There was a problem with restarting the check that I have just fixed in version 1.5 which is on the server now: http://tomriley.net/checknet/ (remember to clear your browser cache). Thanks again for picking this up and I hope you’ll still be interested in using it :) Tom

  28. Kevin says:

    I wonder if it would be possible to do something like this, but replace the current page with a full-screen error message instead, then load the page back when the connection is re-established? Maybe an over-lay div, or something? Suggestions?

    • Tom says:

      Hi Kevin, to achieve what you’re describing, add this code in the checknet.css file before the final “}”

      opacity: 0.9;
      padding: 20% 4% 4%;
      position: fixed;
      width: 92%;
      height: 100%

      …and that should do it.

      • Kevin says:

        That worked great. Thank you very much. Now, one more question:

        I am using this in a page that is accessed by a small client app. As long as the Internet connection is live at the time the app is launched, all is well, and the script catches when the connection drops, just as it should. However, if the Internet connection is down at the time the app is launched, I get the standard “cannot be found” error, because the web side page has not been served yet.

        I tried using your plugin from a local file, that matches exactly the page on the server, by changing the “window.location” in the plugin to the URL on my server. Unfortunately, due to sandbox restrictions, the AJAX request cannot access my web server from a local file.

        Is there an alternative way besides “navigator.onLine” (that just works if I lose network connectivity from my local computer, not the Internet per se), that will let me pull off this little magic until the person clicks through to my server-side page?

        • Tom says:

          Hi Kevin, unfortunately, I do not know a way to avoid using “navigator.onLine” with the situation you’re describing. It may be possible to implement a solution separate from checknet using JSONP techniques, but I don’t currently have the time in my life to explore that option and integrate with the plugin… hopefully in the future :)

  29. David says:

    Hello Tom, I need to run the plugin even if the html page is local.
    I downloaded your zip file, but he does not go on my desktop.
    In my project by jquery Mobile, pages are loaded locally and not from a webserver.
    Any ideas?

    Thanks

  30. Ghasem says:

    Hi
    Thanks for the nice plugin, this is exactly what I needed.
    I have a problem with the checkInterval parameter, it seems that it has the default value of 5000(ms). I’m setting it to different number for example 20000, but while checking the connection requests in firebug I see that the request interval is 5 seconds yet!

    Thanks again
    Ghasem

    • Tom says:

      Ghasem, this might happen if you set checkInterval before calling the main checknet function. Parameters need to be set after calling $.fn.checknet(). If that’s not the problem, can you send a link to your code online and I’ll have a look for the problem. Glad you are using it :)

      • Ghasem says:

        Hi
        I’m setting the parameters after calling the main checknet function. I’m using the sample you’ve provided in the zip package, just changing some parameters as below:

        $(document).ready(function(){
        $.fn.checknet();
        checknet.config.checkInterval = 20000;
        //alert(checknet.config.checkInterval);
        checknet.config.warnMsg = “ارتباط شما با سرور قطع شده است!”;
        checknet.config.checkURL = “netok.html”;
        });

        in the alert it says that checkInterval value is 20000 but the real interval remains 5 (5000 miliseconds).
        *netok.html is a simple html file containing a message that net connection is ok.
        Thanks
        Ghasem

        • Tom says:

          Hi Ghasem, sorry for taking so long to reply. I have a solution for this issue and will release a new version in the next few days. Thanks for pointing out the problem. I’ll update this comment when it’s available and you can also keep an eye on twitter.com/tomdriley for info.

        • Tom says:

          Hi again, Ghasem. I am really sorry I’ve been so busy and only just had time to update the plugin. The problem you detailed has now been corrected in v1.4. Sorry again and thanks for pointing out the issue – I hope you are still able to use it.

          • Ghasem says:

            Thanks for the update, I’m gonna try it now
            I’m using it in my project, it’s very useful for me

  31. Aneta says:

    Hello,
    I am making Extension for Google Chrome. I’m using Your script but it doesn’t work. The checknet.conIsActive is always true. I have never programming in JScript or JQuery so probably I made some stupid mistake. Can I send you my extension on e-mail and You can look at this ?

    Thanks,
    Aneta

    • Tom says:

      Hi Aneta, I haven’t tried making a Chrome Extension yet, so probably can’t help much right now. It’s definitely something I want to do with checknet so will set aside some time to work on making one soon though. If you keep an eye on my tweets (twitter.com/tomdriley), I’ll give out info there, or check back on this blog post. Thanks for using the plugin!

    • Tom says:

      Update: I’ve looked into it, and unfortunately it’s not possible to make a Chome Extension using the plugin because of the way it detects connection. To make a Chrome Extension, you’d have to rely on something less reliable like the navigator.onLine property, or possibly find a JSONP solution. Sorry about that, thanks for being interested in the plugin.

  32. Mr.Atom says:

    Hi,

    Thanks for your awesome plugin. I am developing a WebView based app in android. I need to check the connection from JS. Now the thing is that all the JS are local to my app. Will the checknet work if i use it locally in the app? (I am not able to test this so far as this running in the emulator)

    • Tom says:

      Hi Mr. Atom, unfortunately I’m not able to test the behaviour in a WebView but would be very interested to find out. It needs to be able to get window.location as if it was on a webserver to work properly so I’m thinking it probably won’t work. Could you post your results? Thanks for using the plugin, sorry I can’t help more.

  33. Love it! been looking for a simple solution like this for a while!

    Would be great to have a parameter for setting the message returned or something! Testing this out in a mobile web app to disable functionality if app is not online. Works like a treat!

    • Tom says:

      Thanks Andrew, glad you are finding it useful! I think in the next update, I will set a configuration object for all the settings, so users can pass in things like the warning message if they wish. In the meantime, you could hack through the sourcecode to find the line “No Internet connection detected, disabled features will be re-enabled when a connection is detected.” and change it to whatever you want. Keep an eye on my Twitter stream for info on updates: https://twitter.com/tomdriley

      Thanks again and remember to give links to what you’re making if you feel like sharing :)

    • Tom says:

      Update: I’ve just updated the plugin to v1.3, which allows you to specify the warning message (I’ve also updated the instructions above). You’re welcome!

  34. Kasimir Pfeiffer says:

    Ups, Sorry, missed to tell that on inital file load it works fine but after 5 seconds it shows that I´m offline even that I was online.

    Beside this – good stuff.

    • Tom says:

      Things like this are usually caused because of your local development environment. Does this happen when it’s live on the Internet?

      • Kasimir Pfeiffer says:

        It happens not in a local development environment. I´ll check your hint and see what happens. If i miss, then i do some further research about using ajax requests to check online status.

        Thanks for spending time to answer.

        • Kasimir Pfeiffer says:

          Hello Tom,
          just to your information:

          0. my knowledge of manifest-files is based on
          http://www.html5rocks.com/en/tutorials/appcache/beginner/

          1. I tested it with chrome

          2. i made following extentions:
          <!–

          3. manifestfile “test.appcache” in same dir as index. Content:

          CACHE MANIFEST
          # 2012-07-21:v10

          # Explicitly cached ‘master entries’.
          # All files required to be fully functional if offline
          CACHE:
          index.html
          css/global.css
          css/checknet.css
          js/jquery-1.7.2.min.js
          js/checknet-1.2.min.js

          # Resources that require the user to be online. Here only examples
          NETWORK:
          # /main.py /static.html

          # offline.png will be served in place of online.png
          FALLBACK:
          # images/online.png images/offline.png

          4. load page, but use it inkl. html-file name like:
          http://tomriley.net/checknet/index.html

          5. index is shown and all files are loaded to browsers lokal storage. as long as you are connected its okay.

          6. then you disconnect line: disconnect message appears

          7. now the trouble: if you connect networkcable again, it onlinemode is not realized.

          8. ??? probably a chance to put a file to NETWORK section (the files needs to be online) of manifest-file to make sure that this file is always only requested from online connection. ???

          • Kasimir Pfeiffer says:

            Extention under point 2 is simply enhancement of html tag by the manifest filename. I try it again with
            code-tag:

          • Kasimir Pfeiffer says:

            Last Try:

            < html class=”no-js” lang=”en” manifest=”test.appcache” >

          • Tom says:

            Hi again Kasimir, unfortunately I’m not familiar with the “appcache” framework you are using, but if you can give me links to your application on the Internet, I will look at it and try to help further. The first step would be checking your js console for any errors, like missing files.

            Also, a quick observation: on first impression, it appears that developing your app using this type of framework would eliminate the requirement for a plugin like checknet. Are you sure it is necessary? Feel free to email me tdriley@gmail.com

  35. Kasimir Pfeiffer says:

    I tried it by using that html page in a manifest file because i have to write an application that also works offline, but as soon as we are online, i want to give that info to the user. because of periodically check i can´t use FALLBACK or NETWORK in CACHE MANIFEST file. – Any Idea how to solve situation?

    • Tom says:

      Hi Kasimir, I’m not sure exactly how you would be using a “manifest file” but I have released a new version of the plugin (v1.2) which sets a global object in JavaScript called “checknet”. There is a property of this object, “checknet.conIsActive”, which gets continually updated with either true if connection is active, or false if connection is not active. In your app’s code, you can use something like this:

      if( checknet.conIsActive ){
      // the connection is active
      }else{
      // the connection is not active
      };

      Hope that helps :)

  36. Dave Miller says:

    Thank you !

    I have yet to implement but this is exactly what I was looking for.

    Could you publish the code for your test page ?

  37. Marcelo says:

    Hi,

    I ´m trying to use your plugin. But It didn´t work. I think you forgot to put something. I got your zip and paste in my project. i put css e js in same place you recommend. But I didn´t get work with it.

    I bless your help.

    • Tom says:

      Hi Marcelo,

      Are you sure you implemented all of the code the way I suggest in the instructions (including the $(document).ready code) ? If that is not the problem, you might need to upgrade to a more recent version of jQuery. Another thing to remember is that if you are running the page from a local webserver (not one on the Internet) then it will use that local webserver to check the connection.

      If none of that works, you could give me a link to your site so I can try to identify the problem. Thanks for being interested in my plugin :)
      Tom

      • Marcelo says:

        Tom,

        I found the problem. i´m using eclipse with tomcat. When I start my server and disconnet my cable of internet nothing happen. But when I stop my server the warnning information apper say “your internet disconnect”. Great! Because, you put this strCheckURL=window.location
        . Then window.location is my application running in tomcat.
        Thank you!

        • Tom says:

          Great, I thought that might be the issue. I’d be interested to see what you are making if you feel like sharing the link when it’s online. All the best.

Leave a Reply