5

I have a web application where there are number of Ajax components which refresh themselves every so often inside a page (it's a dashboard of sorts).

Now, I want to add functionality to the page so that when there is no Internet connectivity, the current content of the page doesn't change and a message appears on the page saying that the page is offline (currently, as these various gadgets on the page try to refresh themselves and find that there is no connectivity, their old data vanishes).

So, what is the best way to go about this?

Improve this question

9 Answers 9

Reset to default
13 
navigator.onLine

That should do what you're asking.

You probably want to check that in whatever code you have that updates the page. Eg:

if (navigator.onLine) {
    updatePage();
} else {
    displayOfflineWarning();
}
Improve this answer
4

It seems like you've answered your own question. If the gadgets send an asynch request and it times out, don't update them. If enough of them do so, display the "page is offline" message.

Improve this answer
4

See the HTML 5 draft specification. You want navigator.onLine. Not all browsers support it yet. Firefox 3 and Opera 9.5 do.

It sounds as though you are trying to cover up the problem rather than solve it. If a failed request causes your widgets to clear their data, then you should fix your code so that it doesn't attempt to update your widgets unless it receives a response, rather than attempting to figure out whether the request will succeed ahead of time.

Improve this answer
3

One way to handle this might be to extend the XmlHTTPRequest object with an explicit timeout method, then use that to determine if you're working in offline mode (that is, for browsers that don't support navigator.onLine). Here's how I implemented Ajax timeouts on one site (a site that uses the Prototype library). After 10 seconds (10,000 milliseconds), it aborts the call and calls the onFailure method.

/**
 * Monitor AJAX requests for timeouts
 * Based on the script here: http://codejanitor.com/wp/2006/03/23/ajax-timeouts-with-prototype/
 *
 * Usage: If an AJAX call takes more than the designated amount of time to return, we call the onFailure
 *        method (if it exists), passing an error code to the function.
 *
 */

var xhr = {
    errorCode: 'timeout',
    callInProgress: function (xmlhttp) {
        switch (xmlhttp.readyState) {
            case 1: case 2: case 3:
                return true;
            // Case 4 and 0
            default:
                return false;
        }
    }
};

// Register global responders that will occur on all AJAX requests
Ajax.Responders.register({
    onCreate: function (request) {
        request.timeoutId = window.setTimeout(function () {
            // If we have hit the timeout and the AJAX request is active, abort it and let the user know
            if (xhr.callInProgress(request.transport)) {
                var parameters = request.options.parameters;
                request.transport.abort();
                // Run the onFailure method if we set one up when creating the AJAX object
                if (request.options.onFailure) {
                    request.options.onFailure(request.transport, xhr.errorCode, parameters);
                }
            }
        },
        // 10 seconds
        10000);
    },
    onComplete: function (request) {
        // Clear the timeout, the request completed ok
        window.clearTimeout(request.timeoutId);
    }
});
Improve this answer
3
  • This is a way to detect that a connection to the server failed, not that the browser is offline. If that's good enough for you, most libraries have a way to set a handler for all failed Ajax requests. However, navigator.online is the property that tells you that you are connected to the internet.
    – Ruan Mendes
    Commented Apr 27, 2010 at 14:16
  • 2
    window.navigator.onLine only tells if the browser is set to offline -mode (at least in Firefox). If the Internet connection has been lost, it will still show true, for me at least.
    – Tower
    Commented Jun 5, 2010 at 20:05
  • navigator.onLine works well in Chrome (5 years later). I would recommend using that unless you have a very specific scenario.
    – Danny Bullis
    Commented May 20, 2015 at 18:35
2

Hmm actually, now I look into it a bit, it's a bit more complicated than that. Have a read of these links on John Resig's blog and the Mozilla site. The above poster may also have a good point - you're making requests anyway, so you should be able to work out when they fail.. That might be a much more reliable way to go.

Improve this answer
2

Make a call to a reliable destination, or perhaps a series of calls, ones that should go through and return if the user has an active net connection - even something as simple as a token ping to google, yahoo, and msn, or something like that. If at least one comes back green, you know you're connected.

Improve this answer
1

I think google gears have such functionality, maybe you could check how they did that.

Improve this answer
1

Use the relevant HTML5 API: online/offline status/events.

Improve this answer
0

One possible solution is that if the page and the cached page have a different url to just look and see what url you are on. If you are on the url of the cached page then you are in offline mode. This blog makes a good point about why navigator.online is broke

Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.