В некоторых особых случаях наши разработчики должны знать, не удалось ли выполнить наш запрос из-за Network. И если мы сможем что-то сделать, когда Сеть восстановит соединения.

naviagtor.onLine

`naviagtor.onLine` - лучшее решение для нас, чтобы узнать текущий статус сети браузера. И это поддерживается многими современными браузерами.

Но в старом браузере IE8 вы должны использовать событие `online`.

document.addEventListenner(‘online’, () => {
// todo
});
document.addEventListenner(‘offline’, () => {
// todo 
})

Проверка пульса сети

Несколько лет назад многие браузеры не поддерживали naviagtor.onLine. Поэтому люди пытаются использовать xhr или image, чтобы отправить контрольный сигнал, чтобы проверить, может ли Сеть получить ответ.

const pingUrl = ‘https://ipv4.icanhazip.com';
fetch(`${pingUrl}?_t=` + parseInt(Math.random() * 10000)).then((result) => {
   // todo online
 }).catch((err) => {
 // console.log(err);
 if (err.message.indexOf(‘Failed to fetch’) !== -1 ) {
   // todo offline
 }
 })

Это может быть хорошим решением, если браузер не может поддерживать указанный выше API или код работает в Node.js.

## navigator.connection

А navigator.connection помогает нам получить базовую информацию о подключении, например скорость или другие показатели.

const networkType = navigator.connection.effectiveType
// return ‘3g’, ‘4g’, ‘2g’

😿 Но работает только в Chrome.

Может быть, есть другое решение 《Оценивает пропускную способность》, мы можем рассчитать пропускную способность и проверить ее значение.

const start = Date.now();
fetch(url, {}).then((result) => { 
 const end = Date.now();
 const bw = length / (end — start) * 8000; 
 // check the bw
})

Сеть-сердце-сервис

Поэтому я пишу библиотеку Javascript (network-heart-service) для обработки изменений в сети.

😀 Итак, давайте посмотрим, как это работает.

$ npm install network-heart-service -save

// es6
import NetworkHeartService from 'network-heart-service';
this.networkHeartService = new NetworkHeartService({
 heartMode: 'auto',
 reconnect() {
   console.log(‘TODO …’)
 }
});
this.networkHeartService.start();

Конфигурация

  • heartMode {number} 2000
    если он не определен, это означает использование режима `auto`. Он будет проверять сеть с увеличивающимся таймаутом.
    Но он установлен с номером, он будет проверять сеть в указанное время.
  • lowSpeedNetwork {функция}

Функция будет активирована, когда ваша сеть может работать, но с низкой пропускной способностью сети.

  • повторно подключиться {функция}

Функция будет активирована, когда ваша сеть сможет работать.

  • офлайн {функция}

Функция будет активирована, когда ваша сеть перейдет в автономный режим

API

  • isOnline ()

Проверьте, может ли ваша сеть работать.

const isOnline = await NetworkHeartService.isOnline();
  • start () и stop ()

Запустить или остановить службу проверки сети.

Желаю, чтобы это помогло вам. И ваши вопросы для меня так важны.