Creating an offline notification message

[shsunnyday]

I would like to provide a friendly div box with a message like, “Check your Internet Connection,” if a user goes offline and tries to click on any navigation link on my website. Ultimately, this would keep users on my site’s UI and away from the browsers info page. This would not be a OS notification/prompt box. How would I accomplish this? I know Google Drive uses something similar for Docs. Any Ideas? Thanks.

[jscheuer1]

To do that properly would require quite a bit of code and might not be possible. If your links are more or less ordinary a tags, put these scripts in the head of the page as an experiment:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(document).on('click', 'a', function(e){
	e.preventDefault();
	var href = this.href;
	$(new Image()).on('error', function(){
			alert('Check Your Internet Connection');
		}).on('load', function(){
			window.location.href = href;
		}).attr('src', '1by1.gif?load=' + new Date().getTime());
	});
</script>

Make sure there's an image 1by1.gif in the same folder as the page. It should be a very small .gif image.

Try your links both when connected and when not. If it works out, it can be elaborated. It does in this simple form depend upon the links being more or less ordinary links. They can have fancy layout and hover effects, but they need to be something like:

<a href="somepage.htm">Link Text or img tag</a>

And be aware that browsers do provide notifications when the user is offline, so duplicating that effort seems like a bit of a waste of time.

The browser cache may need to be cleared and/or the page refreshed to see changes.

If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.

[shsunnyday]

That worked! Thanks. How would I change the alert to a fancy css div?



This is about how I would like the notification to look like so you have have an idea of what I am talking about.

[jscheuer1]

That will take me a little time. And as I said this was a test. I checked it here and it worked as well. It will target all links on the page though, even ones that might not be meant to be fired as ordinary links. So I would need to see the page so as to target only the links that are meant to fire as ordinary links and/or take into account different actions when they should fire but in a different way. Making a pop up div is rather easy compared to that.

I have to break now though, so later today or tomorrow I'll get to it. If not, remind me.

I do need to see the page, so please include a link to the page on your site that contains the menu so I can check it out.

[djr33]

This isn't mean to contradict John's posts, but just provide more information.


Technically, this is not possible. The browser (or ISP, or router, or whatever) will make the request and eventually time out. The page has no access to this information and cannot (and should not) control it. It's not the business of a webpage to deal with the internet connection, for security reasons.

However, you can do something like this. One way is as John showed you, to try to load an image and see if it works. Technically, you still can't do this; there are several reasons for it failing to return a value and you don't know how much time to wait. But if you assume it should load within 3 seconds (arbitrarily), that's fine; the problem is that this could then cause a delay in loading a link on a slower connection.

Secondly, I don't think that actually adding a function to the link to check each time is the best method.

You mentioned Google Docs. The way that works is simple: the website is actually always connected to the server. (Technically it's in a loop of requests and responses from the server, not really "connected".) This means that if there has been no response for some time, then you know that the page has lost the connection with the server-- the server might be down, the firewall might be blocking it, or the internet connection may have cut out-- you don't know why, but you can guess most of the time it's the internet connection.

So, to imitate that you'd need to create an Ajax-based request loop to always connect to your site and if after 3-5 seconds there's no response at some point, assume the connection is down. But do you really want all of that on your site?


Another way to do this is to use Ajax for the whole site (as in Facebook for example) and then you can have control over what happens.

For how that works, take a look at Gmail. When it's loading it says "loading"; after about 1 minute it says "this is taking a long time. You might want to refresh the page." It also gives a link to a smaller filesize version.
So, following that model you could display a message if the new content doesn't load. But this would require reworking the whole site into an Ajax style thing rather than separate pages as you have now.



In the end, I strongly suggest not doing this. Unless you have a reason why your site is truly "special" (more than all of the other sites out there) it's probably just doing something it shouldn't be doing by trying to control browser behavior. That's what the message in the browser is there for.

[shsunnyday]

Thank you for your helpful well thought out, and quality information! After reading this I have realized that it is really not needed or practical for implementation to my site. Thank you John and Daniel!

[jscheuer1]

Thanks Daniel. I was looking for a way to express that earlier when I said:

"And be aware that browsers do provide notifications when the user is offline, so duplicating that effort seems like a bit of a waste of time."

I had missed the part about Google Docs before. That's a web application and for a seamless experience depends upon the user maintaining an active connection. And notifications are appropriate when that connection is lost. You're right that in the case of most web pages that sort of thing isn't required. And it is always possible that the loading of the test image could fail for other reasons. If it does, the user will get the notification about their connection when it's some other issue.

Where that sort of notification might be valuable on an otherwise ordinary web page is where that page is fetching content via AJAX. In that case, if desired, one can use error messages and/or codes from the failed attempt to notify the user of a problem.

[djr33]

Right. If this is a "web app" of some sort, it may be useful, especially if the user has entered content into a form that may not have been saved. Beyond that (just to 'improve' the user experience, for example), it's probably excessive and confusing. If the user can just refresh the page after the connection is back, there's no need for it.