In this post you will learn how to build a fully offline-capable app that will show an alert to user when the application is offline or online. But first let me explain what are events and what are the advantages of using them in your application. Many function starts working when a webpage loads in a browser. But in many cases you want to start a function or take an action when a mouse button is clicked, mouse hovered on an object, when a page fully loaded in browser, input value is changed or keyboard button is pressed etc. All these actions are called events. You can write functions to run when a specific event happens. All these function listens for an event and then start taking the action by initiating the function.
There are two methods by which we can check the connection status both are listed below:
- Navigator Object
- Listening to events
1. Navigator Object
There is a global object navigator in javascript by which you can easliy check if a user is offline or online. The navigator.onLine returns true
if a user is connected to the internet but it will return false if the user is offline.
if (navigator.onLine)
console.log("Congratulations, You are connected to the internet.")
else
console.log("Congratulations, You are not connected to the internet.")
2. Listening to events
Now lets review the other method to check the connection status. In this method we continually listen to the two events online
and offline
. And when the connection is interpreted the offline
event is fired and we capture it by listening to this event. And when the connection is back online the online
is fired. So, lets take a look at the following example:
Example
class Connection {
constructor() {
this.options = {
onlineText: 'Your device is connected to the internet.',
offlineText: 'Your device lost its internet connection.',
reconnectText: 'Attempting to reconnect...',
notifier: document.querySelector('.notifier'),
notifierText: document.querySelector('.notifier span'),
spinner: document.querySelector('.notifier .lds-css')
};
this.init();
}
init() {
if (navigator.onLine) {
this.on();
} else {
this.off();
setTimeout(() => {
this.reconnect();
}, 1500);
}
window.addEventListener('online', () => {
this.on();
});
window.addEventListener('offline', () => {
this.off();
setTimeout(() => {
this.reconnect();
}, 1500);
});
}
on() {
this.options.notifierText.innerText = this.options.onlineText;
this.options.notifier.classList.remove('error', 'warning');
this.options.notifier.classList.add('success');
this.options.notifier.style.display = "block";
this.options.spinner.style.display = "none";
}
off() {
this.options.notifierText.innerText = this.options.offlineText;
this.options.notifier.classList.remove('success', 'warning');
this.options.notifier.classList.add('error');
this.options.notifier.style.display = "block";
this.options.spinner.style.display = "none";
}
reconnect() {
this.options.notifierText.innerText = this.options.reconnectText;
this.options.notifier.classList.remove('error', 'success');
this.options.notifier.classList.add('warning');
this.options.notifier.style.display = "block";
this.options.spinner.style.display = "block";
}
}
(function () {
new Connection();
})();
Top comments (1)
Hey @ziishaned ,
Thanks for the awesome post! Can you please double-check the CodePen link? It's not working for me.