How to warn users when the connection is lost?

This blog post was originally published at webinuse.com

There are times when we need to track users’ internet connection. This is especially useful if we are building CRM, CMS, or other content-related software. Maybe the user is trying to save something and the connection is lost, instead of losing what he/she already did, we can warn our user that connection is lost and save data locally, e.g. localStorage.

Besides warning, we can send them a message that we will save everything locally, so users know that we care about their time, experience, and data.

How to register lost connection

Thankfully JavaScript has the solution for that. It is called .onoffline event. Once JS registers that the internet connection is lost, it will fire .onoffline event. This event supports every major browser, according to MDN.

Same as any other event, there are two ways to add an event listener. Let’s take a look at the example below.

/**
 * We can trigger onoffline event by using addEventListener
 * */

 window.addEventListener("offline", (event) => {
     //here we run our code, what to do
     //when connection is lost
 })


 /**
  * We can trigger onoffline event by using onoffline
  * */

  window.onoffline = event => {
     //here we run our code, what to do
     //when connection is lost
  }

How to register when connection is restored

Once we registered a lost connection, we would probably want to register when the connection is restored.

Similar to .onoffline event, there is .ononline event. It is triggered when JS notices that we are back online again. Let’s check an example. This event supports every major browser, according to MDN.

/**
 * We can trigger ononline event by using addEventListener
 * */

 window.addEventListener("online", (event) => {
     //here we run our code, what to do
     //when connection is restored
 })


 /**
  * We can trigger onoffline event by using ononline
  * */

  window.ononline = event => {
     //here we run our code, what to do
     //when connection is restored
  }

What to do?

When a user is offline we can send a warning and save data to the localStorage.

Why is this good?

• User is warned and knows that if something is not working properly it is not app’s fault, but rather someone else’s
• Better user experience. Shows that we were thinking about them even when internet is not working
• We can save user additional pain of losing data that they already entered

So, let’s dive in in the example of how will it look like if we try to implement this in the real world.

/**
 * First we can deal with 
 * offline state
 * */

 function offlineState() {
     /**
      * The first thing we need to do is
      * get data that user could posibly
      * enter or change, e.g. form elements
      * */
     const data = document.querySelector("#input").value;

     /**
      * Our example is simple, but usually here
      * we would collect all data and 
      * put it in array or object.
      * */

      localStorage.setItem("data", data);

      alert("Your connection is lost! Data is saved locally!");
 }

 //Now, let's add event listener

 window.addEventListener("offline", offlineState);


 /**
  * Next thing we will do is create
  * function for when application is back 
  * online
  * */

  function onlineState() {
      /**
       * The first thing we will do is
       * get data from localStorage
       * and return it to form
       * */

       let data = localStorage.getItem("data");

       document.querySelector("#input").value = data;

       //Now we notify user that everything is 
       //back online again

       alert("We are back online! Keep the good work!");
  }

  //Next thing is creating event listener

  window.addEventListener("online", onlineState);

This example just shows what can we do. It is not a definitive guide.

If you are interested in me writing complete function for .onoffline and .ononline events, you can find me on Twitter.

If you have any questions or anything you can find me on my Twitter, or you can read some of my other articles like What is WordPress? A super simple guide for beginners.