Руководство по обработке отключения Интернета в приложениях React.

Фото Томаса Дженсена на Unsplash

Вы когда-нибудь пытались нажать кнопку или получить доступ к службе в любом приложении много раз, не получая никакой обратной связи?

Это может оставить вас без ответа на такие вопросы, как «обрабатывается ли мой запрос?», «сервер приложений не работает?» и т. д., а иногда это может быть связано с потерей подключения к Интернету. Это может снизить уровень удержания пользователей в вашем приложении, если не уделять должного внимания интерактивности и тому, как она влияет на ваших пользователей.

Эта статья предоставит вам средства для обработки изменений интернет-соединения ваших пользователей в вашем приложении.

Что мы будем строить
Веб-страница в React, на которой отображается список изображений.

Что тебе нужно знать

  • Знание компонентов React.
  • Знакомство с ES6.

Давайте погрузимся прямо в.
Мы будем использовать пакет create-react-app для начальной загрузки нашего приложения.
Откройте терминал и запустите:

Bootstrap your application using:
$ npx create-react-app name-of-your-application (Do this if you have Node.js installed).

Если у вас не установлен Node.js, ознакомьтесь с Платформа узла для руководства по установке.

Когда это будет сделано, откройте только что созданную папку в выбранном вами редакторе. У вас должна получиться следующая структура папок.

Снимок экрана 04.01.2019, 20.51.02.png

Изображение 1: Структура папок после начальной загрузки вашего приложения с помощью create-react-app.

Создайте папку внутри src (я назвал свою «помощник») и добавьте файл с именем изображения.js. Этот файл будет содержать массив изображений, которые мы хотим отобразить на веб-странице.
Добавьте в созданный файл образа следующее:

const images = [
  {
    id: 1,
    image: '
  },
  {
    id: 2,
    image: '
  },
  {
    id: 3,
    image: '
  },
  {
    id: 4,
    image: '
  },
  {
    id: 5,
    image: '
  },
  {
    id: 6,
    image: '
  },
  {
    id: 7,
    image: '
  },
  {
    id: 8,
    image: '
  },
];

export default images;

Изображение 2: Массив изображений для отображения.

Замените содержимое App.css следующими стилями:

.app {
  text-align: center;
}

.app p {
  font-size: 30px;
  font-family: Georgia, 'Times New Roman', Times, serif;
}

.app .page-title {
  font-size: 30px;
}

.internet-error {
  height: 60px;
  background: #ff8100;
  margin-top: 0;
  font-size: 20px;
}

.internet-error p {
  font-size: 25px;
  line-height: 60px;
  color: #fff;
  margin: 0;
}

.image-list {
  display: grid;
  grid-gap: 40px;
  grid-template-columns: repeat(4, 1fr);
  width: 1150px;
  margin: 100px auto;
}

.image:hover {
  animation: animate-image 0.5s;
  animation-iteration-count: infinite;
}

@keyframes animate-image {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-1px, -2px) rotate(0deg); }
}

Изображение 3: стили CSS для App.css.

Сделайте то же самое с файлом index.css:

body {
  margin: 0;
  padding: 0;
  font-family: Georgia, 'Times New Roman', Times, serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
    monospace;
}

Изображение 4: стили CSS для index.css.

Концепция компонентов более высокого порядка позволяет нам создавать абстракции над компонентом, который можно легко повторно использовать на вашей платформе. Для краткости я бы посоветовал вам ознакомиться с этой статьей о HOC.

Создайте еще одну папку в папке src с именем Hoc и файл с именем NetworkDetector.jsx внутри нее.

Вставьте в файл следующее содержимое:

import React, { Component } from 'react';

export default function (ComposedComponent) {
  class NetworkDetector extends Component {
    state = {
      isDisconnected: false
    }

    componentDidMount() {
      this.handleConnectionChange();
      window.addEventListener('online', this.handleConnectionChange);
      window.addEventListener('offline', this.handleConnectionChange);
    }

    componentWillUnmount() {
      window.removeEventListener('online', this.handleConnectionChange);
      window.removeEventListener('offline', this.handleConnectionChange);
    }


    handleConnectionChange = () => {
      const condition = navigator.onLine ? 'online' : 'offline';
      if (condition === 'online') {
        const webPing = setInterval(
          () => {
            fetch('//google.com', {
              mode: 'no-cors',
              })
            .then(() => {
              this.setState({ isDisconnected: false }, () => {
                return clearInterval(webPing)
              });
            }).catch(() => this.setState({ isDisconnected: true }) )
          }, 2000);
        return;
      }

      return this.setState({ isDisconnected: true });
    }

    render() {
      const { isDisconnected } = this.state;
      return (
        <div>
          { isDisconnected && (<div className="internet-error">
              <p>Internet connection lost</p>
            </div>)
          }
          <ComposedComponent {...this.props} />
        </div>
      );
    }
  }

  return NetworkDetector;
}

Изображение 5: Сетевой детектор Hoc —

В компоненте выше у нас есть дескрипторConnectionChange метод, который обновляет isDisconnected свойство в нашем локальном состоянии в результате изменения в Javascript «navigator.onLine» свойство, которое возвращает логическое значение. Это логическое значение изменяется и обновляется соответственно в зависимости от способности браузера получать любой ресурс в Интернете. окно.онлайн а также окно.офлайн прослушиватель событий замечает это изменение и запускает метод handleConnectionChange.
навигатор.онлайн свойство не является надежным, и одна проблема заключается в том, что машина может быть подключена к сети или виртуальной сети и не иметь доступа в Интернет.

Как это было решено?
Добавлена ​​дополнительная проверка если (условие === ‘онлайн’) в дескрипторConnectionChange метод, который отправляет запрос на google.com с интервалом в две секунды. Эта проверка помогает убедиться, что браузер не только находится в сети, но и имеет доступ в Интернет. setInterval также очищается с помощью ClearInterval метод после подтверждения онлайн-статуса, чтобы избежать отправки другого запроса.

Почему стоит выбрать google.com?
Причина отправки запроса на получение на google.com вместо любой случайной платформы заключается в том, что у нее большое время безотказной работы. Идея заключается в том, чтобы всегда отправлять запрос в службу, которая всегда онлайн. Если у вас есть сервер, вы можете создать выделенный маршрут, который может заменить домен google.com, но вы должны быть уверены, что у него будет потрясающее время безотказной работы.

Замените содержимое App.js следующим:

import React, { Component } from 'react';
import './App.css';
import images from './helper/images'
import NetworkDetector from './Hoc/NetworkDetector';

class App extends Component {
  renderImage() {
    return (
      <div className="image-list">
        {images.map(data => <img src={data.image} alt="random" key={data.id} className="image" />)}
      </div>
    )
  }
  render() {
    return (
      <div className="App">
        <p className="page-title">The iDrag Imagery</p>
        {this.renderImage()}
      </div>
    );
  }
}

export default NetworkDetector(App);

Изображение 6: Содержимое компонента App.js,

Компонент App.js был ограничен и заключен в Сетевойдетектор HOC, делая NetworkDetector (приложение). Если вы не хотите оборачивать свои HOC таким образом, вы можете добиться аналогичных результатов, обернув HOC в объявление маршрута при использовании реакция-маршрутизатор-дом упаковка.

ezgif.com-оптимизировать.gif

Gif: вывод в браузере при переключении онлайн-статуса веб-страницы

Краткий обзор того, что мы сделали

  • Мы изменили содержимое App.js для отображения списка изображений.
  • Мы создали NetworkDetector HOC для прослушивания изменений в подключении к Интернету и отображения уведомлений.
  • Мы также внесли изменения в App.cssа также index.css для правильного размещения контента на нашей веб-странице.

Что можно улучшить?
Настройте уведомление так, чтобы оно отображалось на любой странице, а не оставалось поверх всех ваших веб-страниц, которые было бы невозможно увидеть, если бы вы не были в верхней части страницы. Этого можно добиться с помощью CSS или любых пакетов предупреждений, таких как милая тревога, тосттак далее.

Мы подошли к концу этой статьи, и я надеюсь, что она помогла пролить свет на обработку и передачу состояния интернет-соединения вашим пользователям. Спасибо за чтение, и, пожалуйста, оставьте комментарий, если у вас есть какие-либо вопросы или отзывы.

Не стесняйтесь просматривать кодовую базу на iDrag гитхаби я также открыт для любых ваших рекомендаций.

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *