Did you know you can keep your website users attention even in case of their disconnectivity! I know you are asking yourself how this is possible.
Don't panic, It doesn't require a phone call to each user :) lol just simple javascript statements and you are done.
To begin with, I think you've ever tried to load Youtube or Twitter when you are not connected. If not, I suggest you to try it before going further.
What have you figure out!
As you might have noticed, These giants still have something to show you that's not so bad in that case.
Let's have a look at the pages they render
Youtube's offline page
Twitter's offline page
Now compare these two pages with the default page that the browser renders to you when you try to access many other websites without internet connectivity
Here is what you get, You probably get this one
Or this one,
Remember, these are the pages that show up even when the user try to navigate to another page though they might have accessed the website before they get disconnected (unless you are using technologies which handle this).
Now guys, let's be honest and compare the youtube's and twitter's reaction to internet disconnectiviy and the default browsers' way. What do you think is user friendly and keeps catching a little part of users' attention towards the site they wanted to access?
Hmmm! Hmmm! I hope we all agree that youtube's and twitter's approach is better. It's a better way to keep users' thoughts towards their products as they (users) are waiting for the internet connection.
Why you not doing the same on your website ? Success doesn't come from very big things, no, even the way you react to small situations shows how you're ready for your audiences and customers. Keep in mind that your success will be defined by the good experience users will have with your product.
In this tutorial, I want to share with you a simple javascript way to detect whether your users are still connected or not and how you can still serve them with a meaningful page.
I know you're like, why are you not starting, you know what! First smile abit and we can move on.
Many developers use AJAX to determine the connection status of the browser (online or offline) by sending a request to the server. However, this is not a good method for determining the state of the browser because it requires bandwidth and can also affect usability.
Yet JavaScript’s Browser Object Model(BOM) provides a direct way to detect browser’s connectivity status i.e. whether the browser is online or offline.
To perform this check, We will be using two possible approches
1. Using .onLine property from navigator object
This first approach targets all possible browsers out there,
This is how it is structured:
navigator.onLine
The navigator object contains information about the browser.
The onLine property returns true if the browser is online, otherwise false.
The good thing about navigator.onLine as I have mentioned is that it is supported in all browsers as shown in this table:
Additionally, the onLine property is read-only.
To test how this approach works out, use these simple html codes:
<!DOCTYPE html>
<html>
<body>
<p>Click the button to check
if the browser is online.</p>
<button onclick="isOnline()">
Click Me
</button>
<p id="demo"></p>
<script>
function isOnline() {
if (navigator.onLine) {
document.getElementById(
"demo").innerHTML = "Online";
} else {
document.getElementById(
"demo").innerHTML = "Offline";
}
}
</script>
</body>
</html>
2. Using the ononline and onoffline javascript events
Note: The ononline and onoffline events are only supported in Firefox and Internet Explorer version 8 to 10.
To test these events you can create .html file and use the following codes
<!DOCTYPE html>
<html>
<body>
<p>This example uses the addEventListener() method to attach a "online" and "offline" event to the window object.</p>
<p>Open the File menu and click on "Work Offline" to toggle between working online and offline.</p>
<p><strong>Note:</strong> The ononline and onoffline events are only supported in Firefox and Internet Explorer version 8 to 10.</p>
<script>
window.addEventListener("online", onFunction);
window.addEventListener("offline", offFunction);
function onFunction() {
alert ("Your browser is working online.");
}
function offFunction() {
alert ("Your browser is working offline.");
}
</script>
</body>
</html>
Or these,
<!DOCTYPE html>
<html>
<body ononline="onFunction()" onoffline="offFunction()">
<p>Open the File menu and click on "Work Offline" to toggle between working online and offline.</p>
<p><strong>Note:</strong> The ononline and onoffline events are only supported in Firefox and Internet Explorer version 8 to 10.</p>
<script>
function onFunction() {
alert ("Your browser is working online.");
}
function offFunction() {
alert ("Your browser is working offline.");
}
</script>
</body>
</html>
Well that's it, you can see that by now you are able to know whether someone is connected or not.
Coming back to youtube's or twitter's way, you have seen that they render well designed pages
How do they do it ?
This is how it goes,
When user visits the site, the visited page and media (audio/video/images) are saved/cached by the browser. There is need to specify which files to save/cache. So, if the file/page exist in browser’s cache then browser shows it. This works whether user is offline or online. Generally the cached files hold mostly static content and basic JavaScript files.
When a page is requested, if there is a living cached copy of the page then browser shows it. The JavaScript linked with the page then checks whether the internet connection is active or not. If it isn’t active then cached page is shown with the message of “No internet”.
That's it, the secret is checking whether user is online or offline (probably using any of the methods shown above) and rendering the static page that they had cached.
Stay tunned
To keep this article short I will not go into details of how to cache pages and more, I will release a different article diving into that very soon!
Conclusion
Keeping attention of your users on you in any case is one of the best practices. In this article we've seen how we can detect whether a user is online or offline and decide what to do after that.
Let me hope this tutorial helped out!
Hooray! It's your turn now
This is the end,
I Would love to know what you think in the comment section!
Stay tunned for many other interesting content.
Top comments (0)