如何处理浏览器的断网情况？-六虎

本文由团队成员一护撰写，已授权涂鸦大前端独家运用，包含但不限于批改、标明原创等权益。

好的断网处理会让人很舒适：lol的断线重连，王者荣耀的断线重连能够确保游戏的继续进行

坏的断网处理甚至不处理会出bug：比方我手前端开发上的项目就出了个bug 业务人员标明非常苦恼

网络问题一贯是一个很值得重视的问题。

比方在慢网状况前端工程师apple id下，添加lo前端面试题achrome浏览器ding防止重复发央求，运用promise次序处理央求的回来结果，或许是添加一些友善的上传发展提示等等。

那么我们有没有想过elementui断网状况下该怎样chrome安卓下载做呢？比方说网络正常->断网->网络正常。Chrome

其实我一贯Element也没想过，直到组里的检验测出一个断网导致的bug，让我意识到重度依托网apple络央求的前端，在断网状况下或许会呈现严峻的bug。

因而我将在这儿记载一下自己对applica前端工程师tion体系断网状况下的处理，一方面防止bug发生，一方面确保用户及时在运用内Apple知道网络appstore现已断开联接

概览
用ch前端开发需求学什么rome什么意思于检测浏览器是否连网的navigator.onLine
用于检测网appointment络情app store况的前端工程师navigator.connection
断网作业”offline”和连网作业elementanimation“online”
断网处理项目实战
- 思路和效果
- 断网处理组件运用
- 断网处elementary理组件概略
- 发现
参apple tv考资料

概览

为了构建一个 “断网（offline）可用”apple的web运用，你需求知道运用在什么时分是断网（offline）的chrome。
不仅仅要知道什么时分断网，更要知道什么appleapp id注册 pay时分网络恢app store复正常（onlinapp设备下载e）。
能够分解陈本下面两种常见状况：

你需求知道用户何时online，这样你能够与服务器之间re-sync（从头elementanimation同步）。
你需求Chrome知道用户chrome官方下载何时offlinechrome官方下载，这样你能够将你未宣告的央求过一段时间再向服务器宣告。

一般能够经过online/offl前端和后端的差异ine作业去做这个chrome手机版作业。

用于检测浏chrome官方下载览器是否连网的navigator.onLine

navigator.onLine

true online
false offlapple storei前端结构ne

能够经过apple paynetwork的chrome安卓版online选项切换为offline，打印naapple watchvigat前端or.onLiApplene验证前端结构。

当浏览器不能联接到网络时，这个特征会更新。规范中是这样定义前端和后端的差异的：

The navigapple storeator.onLiElementne attribute must return false if theapple id uselementuier agent will not contact the network when the user folloApplews links or when a s前端开发需肄业什么cript requests a remotapplee前端训练机构 page (or kappearnows that such an atchrome浏览器安卓版下载teelementtypempt would fail)…

用于检测网络状况的navigator.connection

在youtube观看视频时，自动检测网络状况切换清晰度是怎样做到的呢？
国内的视频网站也会给出一个切换网络的提示，前端学什么该怎样去检测呢？elementui
也就是说，有没有办法检测网络状况？判别其时网络是流转，拥堵，繁app设备下载忙呢？
能够经过chrome浏览器安卓版下载navigator.connection，特征包含effectiveTyelementuipe，rtt，downlink和改动网络作前端开发需求把握什么技能业chan前端学什么ge。承继自NetworkInformation API。

navi前端开发需求把握什么技能gator.connection

online状态下作业console.log(naviappeargator.connection);

{
onchange: null,
effectiveType: "4g",
rtt: 50,
downlink: 2,
saveData: false
}前端学什么

经过navigator前端开发需求学什么前端学什么.connection能够判别出online，fast 3g，slow 3g，和chrome插件offline，这四种状态下的effectiveType分别为4g，3g，2apple tvg，4g（rtt，dochrome安卓下载wnliappearancenk均为0）。

rtt和doapple idwnlink是什么？NetworkInformation是什么？

这是两个反映网络状况的参数Apple，比type愈加chrome安卓版具象且更能反映其时网络的真实状况。

常见网络状况rtt和downlink表

网络状况	rtt(ms)	downlink(Mbit/apple ids)
online	100	2appointment.2
fast 3g	600	1.5chrome安卓下载5
slow 3g	2apple store150	0.4
offline	0	0

留神：rtt和downlapprove前端工程师ink不chromebook是定值，而是实时改动的。online时，或许它现在是rtt 100ms，2.2Mb/s，下一秒就变成125ms，2.1Mb/sapp id注册了。

rtt

联接预估往appAPPle pay复时间
单位为ms
值为四舍五入到25毫秒的最接近apple watch倍数chrome75（就是说这个值x%25=apple==0，能够查询常见网络状况rtt和downlink表chrome）
值越小网速越快。类似apple官网papproveing的timeappointment吧
在Web Workechrome什么意思r中可用

downlink

带chrome官方下载宽预估值appointment
单位为Mbit/s（留Chrome意是Mbchrome什么意思it，不是MapplicationByte。）
值也是四舍五入到APP最接近的25比特/element翻译秒的倍数（就是说这个值x%25===0，能够查询常见网app id注册络状况rtt和downelement是什么牌子link表）
一般越chrelementary什么意思中文ome75宽速度越快，也就是，前端工程师信道chrome插件上能够传输更大都。（吐槽一句，学过的通讯原element翻译理还蛮有用。）
值越大网速越application快。类似高速一般比国道宽。
在Web Worker中可用

草案（前端开发需肄业什么Draft）阶段NetworkInformation API

无论是rtt，仍是downlink，都是这个草案中的内容。
除app id注册此之外还有downlinkMappleax，saveData，type等特征。
更多资料能够查询：NetworkInformation

怎样检测网络改动去做出照顾呢？

NetworkInformation承继自EventTargechrome官方下载t，能够前端结构经过chrome浏览器监听chelement滑板ange作业去做一些照顾。

例前端如能够获得网络状况的改动？

vaapprover connection = navigator.connection；
var type = conne前端工程师ction.effectiveType;
function updateConnectionelementary什么意思中文Status() {
console.log("网络状况从 " + type + " 切换至" + connection.effectiveType);
tapple id暗码重置ype = connection.appleeffapp storeappstoreectiveTyappointmentpe;
}
connection.addEventListener('change', updateConnectelementuiionStatus);

监听apple store改动之后，我们能够弹一个Modal提示用户，也能够出一个N前端开发需求把握什么技能otichromebookce奉告用户网络有element前端开发需求学什么s改动，或许能够更高级得去自动切换清晰度（这个应该比较难）。

引出NetworkInformation的概念，仅仅想起一个抛砖引玉的效果。这种细粒度的前端和后端哪个薪酬高网络状况检测，能够结合具体需求apple tv去具体完成。

在这篇博文中，我们只处理断网和连网两种状况前端面试题，下面来看断网作业”of前端开发fline”和连网作业”onlchrome浏览器ine”。

断网作业”offline”和连网作业”online”

浏览器有两个作业：”on前端开发需求把握什么技能apple storeline” 和 “ofapp id注册fline”.
这两个作业会在浏览器在online mode和offli前端开发需求把握什么技能ne mode之间切换时，由页面的&element翻译lt;bElementody>发射出去。

作业会按照以下app装置下载次序冒泡：document.bodappreciatey -> document -> window。

作业是不能去吊销的（开发者在代码上不能手动变为online或许offline，开发时运用开发者Apple东西能够）。

注册上下线作业的几种办法

最最建议window+addEventLapple payistener的组合。

经过window或docuchromement或document.body和addEventListener(Chrome80仅window有用)
为dochrome浏览器cument或documen前端面试题t.bo前端dy的.ononline或.onoffline特征设置一个js函数。（留神，运用window.ch前端开发rome手机版ononline和windelementary什么意思中文ow.onoffline会有兼容性的问前端开发需求学什么题）
也能够经过标签apple store注册作业<body ononliapple tvne="onlineCb" onoffline="oapple idfflineCb"chrome75></body前端和后端的差异&app装置下载gt;

比方

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

window.addEventListener('load', function()appstore {
var statusapple watch = document.gelement什么意思中文etEl前端开发需求把握什么技能ementByIchrome什么意思d("staelement是什么牌子tus");
var log = docuchromemeapple官网nt.getElementapple tvById("log");
felement什么意思中文unction updateOnlineStatus(event) {
var condition = navigator.onLine ? "online" : "offline";appearance
status.innerHTML = condition.toUapple storepperCase();
log.insertAdjacentHTML(apprapproveeciate"bapple id暗码重置eforeend", "Event: " + event.type + "; Status: " + condition);
}
window.addEventListener('online',  updatelementaryeOnlineStatus);
window.addEventapple storeListener('offline', updateOnlineStatus);
});

其间insertAdjacentHTML是apple id暗码重置在标签节点的elementary附近方位刺进，能够查apple store阅：Dapple官网OM进阶之insertAdjacentHTML

断网处理项目实战

能够依据vuappstoree，react封装出离线处理组件，在需求到的页element什么意思中文面引入即可。Apple

思路和效果

只需做到断网提示+遮罩，上线提示-遮罩即可。

监听offline，断网给出提示和application遮罩：网络已断开前端和后端的差异，请查看网络联接。
监听onlinelement是什么牌子e，前端和后端哪个薪酬高连网给出elementanimation提示和遮罩：网络已联接。

断网处理组件运用

<OfflineHandle
offlineTitle =apple storelementse "断网处理标题"
desc="断网处理描绘"
onlineTielementuitelementaryle=APP"连网提示"
/>

Vue组件

在线演示demo：codesandbox前端工程师.io/s/offline-h…

<!--Offlapp storeineHandle.vue-->
<t前端学什么emplate>
&elementary什么意思中文lt;div v-if="mask" class="offline-masapproachk">
<h2 clapple id暗码重置ass=前端开发需求把握什么技能"offline-maskapple pay-title">{{ offlineTitlechrome }}&lapp storet;/h2>
<p class="offline-mask-desc"elementaElementnimation>{{ desc }}elementui</p &gapprovet;
</div>
</teapple id暗码重置mplate>
<script&element翻译gt;
export default {
name: "offliapplicationne-hand前端结构le",
props: {
offlineTitle: {
typeele前端学什么menttype: String,
defaultapple id: "网络已断开，请查看网络联接。"APP,
},
onlineTitle: {
tapprovey前端pe: Strinappearg,
default: "网elements络已联接",
},
desc: {
type: String,
deapplefault: "",
},
duration: {
type: Number,
default: 4.5,
},
},
data() {
return {
mask: false,
};
},
mounted() {
window.a前端开发ddEventappearanceListener("chrome官方下载offline", this.evenchromebooktHandle);
wichromendow.addEventListener("elementaryonline前端面试题", this.eventHandle);
console.log(thapple payis.desc);
},
beforelementanimationeDestroy() {
window.removeEve前端和后端哪个薪酬高ntListener("offline", this.evelementary什么意思中文entHanapple storedle);
window.removeEventListener("online", this.eventHandle);
},
methods: {
eventHandle(even前端和后端哪个薪酬高t) {
const type = event.type === "offline" ? "前端开发需求把握什么技能error" : "chrome手机版success";
this.$Notice[type]({
titchrome插件lapp设备下载e: type === "error" ? this.offlineTiappeartle : this.onlineTitlchrome安卓版e,
desc: tappreciateype ===appointment "errorapple id暗码重置" ? this.desc :apple "",
duration: thi前端开发s.duration,
});
setTchrome浏览器imeout(() => {
this.melement滑板ask = event.type === "offline"elementary什么意思中文;
}, 1500);
},
}app store,
};
</script>
<style lang="cssapple" scoped>
.offline-mask {
position: fapple payixed;
top: 0;
left: 0;
right:前端开发需肄业什么 0;
bottom: 0;
background-color:apchrome插件ple tv #ccc;
z-in前端学什么dex: 99app装置下载99;前端学什么
tranchromesition: position 2s;
display: flex;
align-items: ceapElementple tvnter;前端工程师element什么意思中文
justify-content: cappleenter;
flex-dirchromeection: column;
}apple store
.of前端和后端的差异flinelementse-mask-titeapp storelement是什么牌子le {
color: rgba(0, 0, 0, 0.8);
}
.oChromeffline-mask-desc {
marApplegin-top: 20px;
color: red;
font-weight: bold;
}
&app id注册lt;/styapp storele>

React组件

在线chromebookdemo：codesandbox.io/s/offline-h…apple id暗码重置

// offlineHandle.js
import Rappointmenteact, { useState, useEffect } from "element翻译react";
import { notificaappelementsle idtion } from "antd";
import "antd/dist/antd.css"appapp装置下载le id;
impoapplicationrt "./index.css";
const Ofappearan前端和后端的差异ceflineHandle = (pElementrops) => {
conelementuist {
offlineTitle = "网络chrome已断开，application请查看网络联接。",
onlielement滑板neTitle = "element前端开发需求把握什么技能ui网络已联接",
desc,
duratapple watchrome安卓下载chion = 4.5
} = props;
const [mask, setMask] = useState(element什么意思中文false);
const eventHandler = (event) => {
celementary schoapple payolonst type = event.type === "offline" ? "error" :chrome插件 "success";
console.log(desc, "descapproach");
openNotificaapple id暗码重置tion({
type,
title: tapproachype === "error" ? offlineTitle : onlineTitle,
deelement是什么牌子sc: type === "error" ? desc : "",
duration
});
setTi前端训练组织meout(() => {
setMask(event.type === "offline");
}, 1500);
};
const openNotificatio前端开发需求学什么n = ({ tchromeype, title, desc, duration }) => {
notific前端和后端哪个薪酬高ation[tchrome手机版ype]({
message:前端开发需肄业什么 telementtypeitle,
description: desc,
duration
});
}Apple;
useEffect(() => {前端开发需求把握什么技能
window.addEventListener("offline", eventelementsHand前端和后端哪个薪酬高leElementr);
window.addEveelement是什么牌子ntListener("online", eventHandlapple storeer);
return () => {
window.removeEventListener("elementary schoolofflichromebookne", eelement什么意思中文ventHandler);approach
window.removeEventListener("onli前端ne", eventHchrome安卓下载andler);
};
}, []);
const renderchrome浏览器安卓版下载OfflineMask = () => {
if (!mask) r前端开发eturn null;
return (
<div className="offlineapprove-mask"application>
&ltaChromepproach;h2 className="offline-mask-title">{offlineTitleelementary什么意思中文}&l前app store端训练组织t;/h2>
<p className="offline-mask-deschromec">{desc}<前端面试题/p >
</div&approvegt;
);
};
return <>{renderOfflineMask(apple id)}</>;
};
export default OfflineHaeleapple tvmentary schooapple id暗码重置lndle;

index.css文件与vue的style前端工程师标签中的内容一起。

发现

offlelementtypeine和online作业：window有用，document和docume前端chrome浏览器训练组织nt.body设置无效

手上的项目只作业在Chrappearome浏览器，只有为window设置offline和online才收效。
作业环境：”Mozillappreciatea/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.149 Safari/537.36

为position添加2s的transition的防止屏闪

参考资料：

devapple watcheloper.mozilla.orgapp store/en-US/docs/…
deapple tvveloper.mozilla.org/en-US/docs/…
developer.mozilla.org/en-US/docs/…
deelementanimationveloper.mozilla.org/en-US/docs/…

如何处理浏览器的断网情况？

概览