Detecting network state with Javascript

From time to time our devices tend to lose connection to the network due to numerous reasons. Those issues can range from our Internet service provider dropping the connection, to us being out of network reach which ultimately results in the user being offline, even for a brief moment. This could cause a very bad experience for the user if they don’t understand the network status, such as requests not showing the desired data, form submitting not doing anything, loader spinning indefinitely.

Better UX

While online or offline state detection might seem like a futile or pointless feature, we think it’s a great user experience where our user knows what’s going on with their application and in this case, what’s going on with their connection because there are certain scenarios where users could lose some of their work.

With applications like Google Docs, there’s a risk that users can’t save a document they were working on or maybe some important part of that document without their knowledge and it’s always a good idea to let the users know that there’s a risk of losing their work. So Google Docs have a nice feature to let the users know that they’ve lost their internet connection.

Spotify also does a great job of telling its users that they’ve lost their connection. Since losing an internet connection while listening to some music won’t result in losing important data like writing some document would, it would certainly contribute to some bad user experience if users don’t know what has happened and why is their music not playing. As seen from the image, Spotify shows a notification near your name with a message about what has happened.

Our application, Propoze, also has network detection. With Propoze, users can create proposals that they can save as drafts or send to the clients. Writing proposals takes a considerable amount of time and we didn’t want our users to lose their work due to network connection issues. A simple solution we came up with for this kind of problem is that we’re letting our users know that they have lost their connection and that their changes could be lost. As seen in the image below we’re showing a toast message that their settings will be saved next time they come online.

Javascript Navigator attribute

Javascript has implemented a Navigator object that can be retrieved using the window.navigator property. The Navigator object has a lot of properties implemented. Most of the properties are read-only and most are used for checking different states of the user agent. For example, we can check if a user has enabled their cookies by checking window.navigator.cookieEnabled property. We can also detect users' geolocation by checking window.navigator.geolocation property.

The property we’re checking for this use case is window.navigator.onLine. With this property, we’re detecting network changes for our user. Although navigator.onLine is compatible with all browsers, this feature behaves differently on some browsers. For Chrome, Safari, and Firefox, the offline state is detected when the browser can’t connect to a local area network or a router. In Internet Explorer switching the browser to offline mode is detected as the offline state.

If you’re using virtualization software you should pay attention to this state since there’s a risk of getting false positives because some virtualization software has virtual ethernet adapters that are always “connected”.

Network status listener

One way of detecting a network state is by checking a state of an object in the simple example below.

// returns true if online, false if offline
const online = window.navigator.onLine;

if (online) {
  console.log("Online :D");
} else {
  console.log("Offline :(");
}

The other way to go is by listening for the events on window.ononline and window.onoffline. They both fire on window.navigator.onLine state change. window.ononline returns true if the browser is online and window.onoffline returns true if the browser is offline. You can do this also by attaching an addEventListener to the window object. I found this approach to be more straightforward so I’ve been using it more.

window.addEventListener("online", () => {
  console.log("Online :D");
});

window.addEventListener("offline", () => {
  console.log("Offline :(");
});

If you need to detect the initial network state you should use window.navigator.onLine. But if you require to listen for changes in the network state, you should attach a listener as in the second example.

For this purpose, I’ve created a simple CodePen example in which I’ve implemented both examples I’ve talked about

You can play with this example and see how it works and maybe implement it in your next project.

Conclusion

There are several ways of handling users' network state that all represent a great user experience. Furthermore, a lot of top-tier applications are mitigating the connection loss so users don’t even seem to notice that their connection has been lost. At least, some of them just notify their users about connection problems.

So, if you’re implementing a feature in your application and there is a possibility of users losing their progress, such as filling in long forms, or creating and editing some data, that needs to be handled. If that’s the case, I would recommend implementing this feature of detecting their network state with the help of a Navigator object and acknowledging them that they could lose their progress. However this is implemented, it will surely give users a tiny bit of a better user experience while using your application.

Thank you for your the time to read this blog! Feel free to share your thoughts about this topic in the comments or drop us an email at hello@prototyp.digital.