Как бороться с отключением браузера?

Эта статья была написана членом командыIchigoОн был уполномочен для эксклюзивного использования переднего конца Туя, в том числе, но не ограничиваясь редактированием, маркировкой оригинальности и других прав.

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

Плохая обработка отключения сети или даже отсутствие обработки вызовет ошибки: например, ошибка возникла в проекте, над которым я работаю, и бизнес-персонал выразил сильное беспокойство

Проблемы с сетью всегда были предметом беспокойства.

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

Итак, вы когда-нибудь задумывались о том, что делать, когда сеть отключена? НапримерСеть нормальная -> сеть отключена -> сеть нормальная.

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

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

• Обзор
• navigator.onLine для определения, подключен ли браузер к Интернету
• navigator.connection для определения состояния сети
• Событие отключения «оффлайн» и событие подключения «онлайн»
• Фактический бой проекта обработки отключения сети
  • идеи и эффекты
  • Использование компонентов обработки отключения
  • Подробная информация о компонентах обработки отключения сети
  • Обнаружить
• использованная литература

Обзор

Чтобы создать веб-приложение, доступное в автономном режиме, вам необходимо знать, когда приложение находится в автономном режиме. Не только знать, когда сеть выходит из строя, но и знать, когда сеть вернется в нормальное состояние (онлайн). Его можно разложить на следующие две распространенные ситуации:

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

Обычно это можно сделать с помощью онлайн/оффлайн мероприятий.

navigator.onLine для определения, подключен ли браузер к Интернету

navigator.onLine

• true online
• false offline

Вы можете переключиться в автономный режим через онлайн-вариант сети и распечатать navigator.onLine для проверки.

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

The navigator.onLine attribute must return false if the user agent will not contact the network when the user follows links or when a script requests a remote page (or knows that such an attempt would fail)...

navigator.connection для определения состояния сети

Как автоматически определять состояние сети и переключать резкость при просмотре видео на ютубе? Домашние видеосайты также будут напоминать о переключении сетей, как это обнаружить? То есть есть ли способ определить состояние сети? Как определить, является ли текущая сеть бесперебойной, перегруженной или занятой? Через navigator.connection свойства включают в себя EffectiveType, rtt, downlink и change network event change. Унаследовано от NetworkInformation API.

navigator.connection

Запуск в онлайн-состоянииconsole.log(navigator.connection);

{
    onchange: null,
    effectiveType: "4g",
    rtt: 50,
    downlink: 2,
    saveData: false
}

Онлайн, быстрый 3g, медленный 3g и автономный режим можно определить с помощью navigator.connection Эффективные типы в этих четырех состояниях: 4g, 3g, 2g и 4g соответственно (rtt, нисходящий канал оба равны 0).

Что такое rtt и нисходящий канал? Что такое сетевая информация?

Это два параметра, отражающие состояние сети, которые более специфичны, чем тип, и могут лучше отражать реальную ситуацию в текущей сети.

Общие условия сети rtt и таблица нисходящего канала

состояние сети	rtt(ms)	downlink(Mbit/s)
online	100	2.2
fast 3g	600	1.55
slow 3g	2150	0.4
offline	0	0

Уведомление:rtt и downlink не являются фиксированными значениями, а изменяются в режиме реального времени. В онлайне это может быть rtt 100 мс, сейчас 2,2 Мбит/с, а в следующую секунду станет 125 мс, 2,1 Мбит/с.

rtt

• Расчетное время приема-передачи соединения
• Единица мс
• Значение округляется до ближайшего кратного 25 миллисекундам (то есть значение x%25===0, можно наблюдать общие условия сети rtt и таблицы downlink)
• Чем меньше значение, тем выше скорость интернета. время как пинг
• Доступно в веб-воркере

downlink

• Оценка пропускной способности
• Единицей измерения является Мбит/с (обратите внимание, что это Мбит, а не Мбайт).
• Значение также округляется до ближайшего кратного 25 бит в секунду (то есть это значение x%25===0, можно наблюдать общую сетевую ситуацию rtt и downlink table)
• Как правило, чем шире скорость, тем выше скорость, то есть тем больше данных можно передать по каналу. (Тукао, принципы общения, которые я изучил, весьма полезны.)
• Чем выше значение, тем выше скорость сети. Подобные автомагистрали обычно шире национальных автомагистралей.
• Доступно в веб-воркере

Предварительный этап NetworkInformation API

Будь то rtt или нисходящий канал, это содержание этого черновика. Кроме того, есть downlinkMax, saveData, type и другие атрибуты. Дополнительную информацию можно найти по адресу:NetworkInformation

Как обнаружить изменения в сети и отреагировать?

NetworkInformation наследуется от EventTarget, и вы можете выполнять некоторые действия, прослушивая событие изменения.

Например, чтобы получить изменения в условиях сети?

var connection = navigator.connection；
var type = connection.effectiveType;

function updateConnectionStatus() {
  console.log("网络状况从 " + type + " 切换至" + connection.effectiveType);
  type = connection.effectiveType;
}

connection.addEventListener('change', updateConnectionStatus);

После наблюдения за изменением мы можем воспроизвести Modal, чтобы напомнить пользователю, или мы можем отправить уведомление, чтобы уведомить пользователя об изменении сети, или мы можем автоматически переключить разрешение более продвинутым способом (это должно быть сложнее) .

Представляя концепцию NetworkInformation, просто подумайте о роли. Это детальное определение состояния сети может быть реализовано в сочетании с конкретными требованиями.

В этом сообщении блога мы имеем дело только с двумя случаями отключения и подключения Давайте посмотрим на событие отключения «офлайн» и событие подключения «онлайн».

Событие отключения «оффлайн» и событие подключения «онлайн»

Браузер имеет два события: «онлайн» и «офлайн». Эти два события запускаются браузером страницы, когда браузер переключается между онлайн-режимом и автономным режимом.<body>Опустошить.

События всплывают в следующем порядке: document.body -> document -> window.

События нельзя отменить (разработчики не могут вручную переключаться в режим онлайн или оффлайн в коде, они могут использовать инструменты разработчика во время разработки).

Несколько способов регистрации онлайн и оффлайн событий

Наиболее рекомендуемая комбинация window+addEventListener.

• Через окно или документ или document.body и addEventListener (Chrome80 действителен только для окна)
• Установите функцию js для свойства .ononline или .onoffline документа или document.body. (Обратите внимание, что использование window.ononline и window.onoffline приведет к проблемам совместимости)
• Вы также можете зарегистрировать тег события<body ononline="onlineCb" onoffline="offlineCb"></body>

пример

<div id="status"></div>
<div id="log"></div>

window.addEventListener('load', function() {
  var status = document.getElementById("status");
  var log = document.getElementById("log");

  function updateOnlineStatus(event) {
    var condition = navigator.onLine ? "online" : "offline";
    status.innerHTML = condition.toUpperCase();

    log.insertAdjacentHTML("beforeend", "Event: " + event.type + "; Status: " + condition);
  }

  window.addEventListener('online',  updateOnlineStatus);
  window.addEventListener('offline', updateOnlineStatus);
});

Среди них insertAdjacentHTML вставляется в соседнее положение узла метки, вы можете обратиться к: DOM advanced insertAdjacentHTML

Фактический бой проекта обработки отключения сети

На основе Vue React может инкапсулировать компоненты автономной обработки, которые могут быть представлены на необходимых страницах.

идеи и эффекты

Пока достигнуто напоминание об отключении от сети + маска, можно использовать онлайн-напоминание - маска.

• Контролируйте в автономном режиме, отключите сеть, чтобы дать напоминания и маски: сеть была отключена, проверьте подключение к сети.
• Контролируйте онлайн, подключайтесь к сети, чтобы выдавать напоминания и маски: сеть подключена.

Использование компонентов обработки отключения

<OfflineHandle
    offlineTitle = "断网处理标题"
    desc="断网处理描述"
    onlineTitle="连网提醒"
/>

Vue-компоненты

Демо-версия онлайн-демонстрации:код sandbox.io/is/offline-still…

<!--OfflineHandle.vue-->
<template>
  <div v-if="mask" class="offline-mask">
    <h2 class="offline-mask-title">{{ offlineTitle }}</h2>

    <p class="offline-mask-desc">{{ desc }}</p >
  </div>
</template>

<script>
export default {
  name: "offline-handle",
  props: {
    offlineTitle: {
      type: String,
      default: "网络已断开，请检查网络连接。",
    },
    onlineTitle: {
      type: String,
      default: "网络已连接",
    },
    desc: {
      type: String,
      default: "",
    },
    duration: {
      type: Number,
      default: 4.5,
    },
  },
  data() {
    return {
      mask: false,
    };
  },
  mounted() {
    window.addEventListener("offline", this.eventHandle);
    window.addEventListener("online", this.eventHandle);
    console.log(this.desc);
  },
  beforeDestroy() {
    window.removeEventListener("offline", this.eventHandle);
    window.removeEventListener("online", this.eventHandle);
  },
  methods: {
    eventHandle(event) {
      const type = event.type === "offline" ? "error" : "success";
      this.$Notice[type]({
        title: type === "error" ? this.offlineTitle : this.onlineTitle,
        desc: type === "error" ? this.desc : "",
        duration: this.duration,
      });
      setTimeout(() => {
        this.mask = event.type === "offline";
      }, 1500);
    },
  },
};
</script>

<style lang="css" scoped>
.offline-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  z-index: 9999;
  transition: position 2s;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.offline-mask-title {
  color: rgba(0, 0, 0, 0.8);
}
.offline-mask-desc {
  margin-top: 20px;
  color: red;
  font-weight: bold;
}
</style>

Реагировать компоненты

Онлайн-демонстрация:код sandbox.io/is/offline-still…

// offlineHandle.js
import React, { useState, useEffect } from "react";
import { notification } from "antd";
import "antd/dist/antd.css";
import "./index.css";

const OfflineHandle = (props) => {
  const {
    offlineTitle = "网络已断开，请检查网络连接。",
    onlineTitle = "网络已连接",
    desc,
    duration = 4.5
  } = props;
  const [mask, setMask] = useState(false);

  const eventHandler = (event) => {
    const type = event.type === "offline" ? "error" : "success";
    console.log(desc, "desc");
    openNotification({
      type,
      title: type === "error" ? offlineTitle : onlineTitle,
      desc: type === "error" ? desc : "",
      duration
    });
    setTimeout(() => {
      setMask(event.type === "offline");
    }, 1500);
  };

  const openNotification = ({ type, title, desc, duration }) => {
    notification[type]({
      message: title,
      description: desc,
      duration
    });
  };

  useEffect(() => {
    window.addEventListener("offline", eventHandler);
    window.addEventListener("online", eventHandler);
    return () => {
      window.removeEventListener("offline", eventHandler);
      window.removeEventListener("online", eventHandler);
    };
  }, []);

  const renderOfflineMask = () => {
    if (!mask) return null;
    return (
      <div className="offline-mask">
        <h2 className="offline-mask-title">{offlineTitle}</h2>

        <p className="offline-mask-desc">{desc}</p >
      </div>
    );
  };

  return <>{renderOfflineMask()}</>;
};

export default OfflineHandle;

Файл index.css соответствует содержимому тега стиля vue.

Обнаружить

• автономные и онлайн-события: окно допустимо, параметры документа и document.body недействительны

Проект работает только в браузере Chrome и вступает в силу только в том случае, если для окна установлены офлайн и онлайн. Операционная среда: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, например Gecko) Chrome/80.0.3987.149 Safari/537.36

• Добавьте 2-секундный переход в положение, чтобы избежать вспышки экрана

Использованная литература:

• developer.Mozilla.org/en-US/docs/…
• developer.Mozilla.org/en-US/docs/…
• developer.Mozilla.org/en-US/docs/…
• developer.Mozilla.org/en-US/docs/…