Shulou(Shulou.com)06/03 Report--

The main content of this article is "how to deal with the disconnection of the browser". Interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Next, let the editor take you to learn how to deal with the disconnection of the browser.

Overview

In order to build a "offline available" web application, you need to know when the application is offline.

Know not only when the network will be cut off, but also when the network will return to normal (online).

Chen Ben can be broken down into the following two common situations:

You need to know when the user online so that you can re-sync (resynchronize) with the server.

You need to know when the user offline, so that you can send your unissued request to the server after a period of time.

You can usually do this through the online/offline event.

Navigator.onLine used to detect whether the browser is connected to the Internet

Navigator.onLine

True online

False offline

You can use the online option of network to switch to offline and print navigator.onLine verification.

This property is updated when the browser cannot connect to the network. This is defined in the specification:

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 used to detect the state of the network

How is it possible to automatically detect the network condition and switch the definition when watching a video on youtube?

Domestic video websites will also give a reminder of switching networks, how to detect it?

In other words, is there any way to detect the state of the network? Judge whether the current network is smooth, congested and busy?

It can be done via navigator.connection, and the properties include effectiveType,rtt,downlink and change network event change. Inherited from NetworkInformation API.

Navigator.connection

Run console.log (navigator.connection) in online

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

Online,fast 3G effectiveType slow 3G and offline can be identified by navigator.connection. In these four states, the effectiveType is 4g effectiveType 3G and 2g Magneto 4g (rtt,downlink is 0).

What are rtt and downlink? What is NetworkInformation?

These are two parameters that reflect the state of the network, which are more concrete and can better reflect the real situation of the current network than type.

Rtt and downlink tables of common network conditions

Network status rtt (ms) downlink (Mbit/s) online1002.2fast 3g6001.55slow 3g21500.4offline00

Note: rtt and downlink are not fixed values, but change in real time. In online, maybe it is now rtt 100ms 2.2Mb hand, and the next it will be 125ms 2.1MB.

Rtt

Connection estimated round trip time

Unit is ms

The value is the nearest multiple rounded to 25 milliseconds (that is, the value x% 25 milliseconds is 0, you can observe the rtt and downlink tables of common network conditions)

The smaller the value, the faster the network speed. A time like ping.

Available in Web Worker

Downlink

Bandwidth estimate

The unit is Mbit/s (note that it is Mbit, not MByte. )

The value is also a multiple of rounding to the nearest 25 bits per second (that is, the value x% 25 bits / s is 0, you can observe the rtt and downlink tables of common network conditions)

In general, the wider the speed, the faster, that is, more can be transmitted on the channel. (to complain, the communication principles I have learned are quite useful. )

The higher the value, the faster the Internet speed. Similar highways are generally wider than national highways.

Available in Web Worker

Draft (Draft) stage NetworkInformation API

Both rtt and downlink are part of this draft.

In addition, there are attributes such as downlinkMax,saveData,type.

More information can be found at NetworkInformation

How to detect network changes to respond?

NetworkInformation inherits from EventTarget and can make some responses by listening for change events.

For example, can you get changes in the state of the network?

Var connection = navigator.connection; var type = connection.effectiveType; function updateConnectionStatus () {console.log ("Network condition switches from" + type + "to" + connection.effectiveType); type = connection.effectiveType;} connection.addEventListener ('change', updateConnectionStatus) "

After listening for changes, we can use a Modal to remind the user that the network has changed, or we can send a Notice to notify the user of a change in the network, or we can automatically switch the definition (which should be difficult).

When it comes to the concept of NetworkInformation, it just reminds me of the role of throwing a brick to attract jade. This kind of fine-grained network condition detection can be realized according to specific requirements.

In this blog post, we only deal with the two cases of network outage and networking. Let's take a look at the disconnection event "offline" and the networking event "online".

Outage event "offline" and networking event "online"

Browsers have two events: "online" and "offline".

These two events are emitted by the page when the browser switches between online mode and offline mode.

Events bubble in the following order: document.body-> document-> window.

Events cannot be canceled (developers cannot manually change to online or offline in code, and developers can use developer tools when developing).

Several ways to register online and offline events

The most recommended combination of window+addEventListener.

Via window or document or document.body and addEventListener (Chrome80 is valid only for window)

Set a js function for the .ononline or .onboarding properties of document or document.body. (note that there are compatibility issues with the use of _ window.ononline and _ window.onoffline)

You can also register events through tags

Examples

Window.addEventListener ('load', function () {var status = document.getElementById ("status"); var log = document.getElementById ("log"); function updateOnlineStatus (event) {var condition = navigator.onLine? "online": "offline"; status [XSS _ clean] = condition.toUpperCase (); log.insertAdjacentHTML ("beforeend", "Event:" + event.type + "; Status:" + condition);} window.addEventListener ('online', updateOnlineStatus); window.addEventListener (' offline', updateOnlineStatus);})

Where insertAdjacentHTML is inserted in the vicinity of the tag node, you can refer to: DOM Advanced insertAdjacentHTML

The actual combat of the off-network processing project

The Spin,Notice component based on vue and iView encapsulates the offline processing component, which can be introduced into the page that needs to be visited.

Ideas and effects

As long as the network disconnection reminder + mask, online reminder-mask can be done.

Monitor offline, disconnect network to give reminders and masks: the network is disconnected, please check the network connection.

Monitoring online, networking to give reminders and masks: the network is connected.

Use of network disconnection processing components

Details of outage processing components

{{offlineTitle}}

{{desc}}

Export default {name: 'offline-handle', props: {offlineTitle: {type: String, default:' the network has been disconnected, please check the network connection.' ,}, onlineTitle: {type: String, default: 'network connected',}, desc: {type: String, default:',}, duration: {type: Number, default: 4.5,},}, data () {return {spin: false,} }, mounted () {window.addEventListener ('offline', this.eventHandle); window.addEventListener (' online', this.eventHandle);}, 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.spin = event.type = = 'offline';}, 1500);},},}; .offline-mark {position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: # ccc; z-index: 9999 Transition: position 2s;} / deep/.ivu-spin-fix {text-align: left; font-size: 20px; h3 {color: rgba (0,0,0,0.8);} p {margin-top: 20px; color: red; font-weight: bold;}}

find

Offline and online events: window is valid, document and document.body settings are invalid

The project in hand only runs in the Chrome browser, and only if offline and online are set for window.

Operating environment: "Mozilla/5.0 (Macintosh; Intel Mac OS X 10-14-6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.149 Safari/537.36

Add 2s transition to position to avoid flashing

At this point, I believe you have a deeper understanding of "how to deal with browser outage". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.