Эта запись в блоге изначально была опубликована на веб-сайте webinuse.com

Бывают случаи, когда нам нужно отслеживать интернет-соединение пользователей. Это особенно полезно, если мы создаем CRM, CMS или другое программное обеспечение, связанное с контентом. Возможно, пользователь пытается что-то сохранить и соединение теряется, вместо того, чтобы потерять то, что он уже сделал, мы можем предупредить нашего пользователя о потере соединения и сохранить данные локально, например. локальное хранилище.

Помимо предупреждения, мы можем отправить им сообщение о том, что мы сохраним все локально, чтобы пользователи знали, что мы заботимся об их времени, опыте и данных.

Как зарегистрировать потерянное соединение

К счастью, в JavaScript есть решение для этого. Это событие называется .onoffline. Как только JS регистрирует потерю интернет-соединения, он запускает событие .onoffline. Это событие поддерживают все основные браузеры, сообщает MDN.

Как и любое другое событие, есть два способа добавить прослушиватель событий. Давайте посмотрим на пример ниже.

/**
 * 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
  }

Как зарегистрироваться при восстановлении соединения

После того, как мы зарегистрировали потерянное соединение, мы, вероятно, захотим зарегистрировать, когда соединение будет восстановлено.

Подобно событию .onoffline, есть событие .ononline. Он срабатывает, когда JS замечает, что мы снова в сети. Давайте проверим пример. Это событие поддерживают все основные браузеры, сообщает 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
  }

Что делать?

Когда пользователь не в сети, мы можем отправить предупреждение и сохранить данные в localStorage.

Почему это хорошо?

  • Пользователь предупрежден и знает, что если что-то не работает должным образом, это не вина приложения, а чья-то еще
  • Лучший пользовательский опыт. Показывает, что мы думали о них, даже когда интернет не работал
  • Мы можем избавить пользователя от дополнительной боли потери данных, которые он уже ввел.

Итак, давайте рассмотрим пример того, как это будет выглядеть, если мы попытаемся реализовать это в реальном мире.

/**
 * 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);

Этот пример просто показывает, что мы можем сделать. Это не окончательное руководство.

Если вам интересно, чтобы я написал полную функцию для событий .onoffline и .ononline, вы можете найти меня в Твиттере.

Если у вас есть какие-либо вопросы или что-то еще, вы можете найти меня в моем Твиттере, или вы можете прочитать некоторые из моих других статей, таких как Что такое WordPress? Супер простое руководство для начинающих.