EffectiveType is an attribute of the Network Information API that is invoked in JavaScript using the navigator.connection object. In Chrome, you can put the following into DevTools to see what connection types are in effect (ECT) :

console.log(navigator.connection.effectiveType); // 4G
Copy the code

EffectiveType The value can be ‘slow-2G’, ‘2G’, ‘3G’, or ‘4G’. This feature allows you to improve page loading speed by providing lower quality resources on slow Internet connections.

In Chrome before 62, we only to developers announced the theory of network connection types (through the navigator. Connection. Type) rather than the client the actual network connection quality.

Chrome’s valid connection type is currently determined using a combination of the most recently observed round trip time (RTT) and downlink values.

It summarizes the network connection performance measured as the closest type of cellular connection (such as 2G), even if you’re actually connected to WiFi. As you can see, you’re connected to Starbucks’ WiFi, but your network type is actually 2G or 3G.

How do you respond to changes in the quality of your connections? We can use the Connection. onchange event listener to listen for network changes:

function onConnectionChange() { const { rtt, downlink, effectiveType, saveData } = navigator.connection; Console. log(' Valid network connection type:${effectiveType}`); Console. log(' Estimated downlink speed/bandwidth:${downlink}Mb/s`); Console. log(' Estimated round-trip time:${rtt}ms`); Console. log(' Turn on/request data protection mode:${saveData}`);
}

navigator.connection.addEventListener('change', onConnectionChange)
Copy the code

Here is a quick test where I simulated a “low speed phone” configuration in DevTools and was able to switch from “4G” to “2G” :

EffectiveType is supported in Chrome, Opera and Firefox on Android. Some other network quality tips can be viewed in Navigator. connection, including RTT, downLink and downlinkMax.

EffectiveType I used effectiveType in the Google Doodles application, an open source project based on vue.js. Based on ECT values, we can set the Connection property to fast or slow by using data binding. Roughly as follows:

if (/\slow-2g|2g|3g/.test(navigator.connection.effectiveType)) {
  this.connection = "slow";
} else {
  this.connection = "fast";
}
Copy the code

This allows us to render different outputs (video or low resolution images) depending on the type of connection the user has in force.

   <template>
      <div id="home">
        <div v-if="connection === 'fast'"> <! -- 1.3MB video --> <video class= 1.3mb"theatre" autoplay muted playsinline control>
            <source src="/static/img/doodle-theatre.webm" type="video/webm">
            <source src="/static/img/doodle-theatre.mp4" type="video/mp4"> </video> </div> <! -- 28KB image --> <div v-if="connection === 'slow'">
          <img class="theatre" src="/static/img/doodle-theatre-poster.jpg">
        </div>
      </div>
   </template>
Copy the code

Max Bock wrote an interesting article about using the React network awareness component. He suggested how to render different components based on network speed:

switch(connectionType) {
    case '4g':
        return <Video src={videoSrc} />

    case '3g':
        return <Image src={imageSrc.hires} alt={alt} />

    default:
        return <Image src={imageSrc.lowres} alt={alt} />
}
Copy the code

Note: You can use effectiveType with Service Workers to deal with users who are offline due to slow connections.

For debugging, you can override network quality estimates using the Chrome flag “force-effective-connection-type”, which can be set in Chrome :// Flags. DevTools network emulation can also provide a limited debugging experience for ETC.

EffectiveType is also available through client prompts, allowing developers to communicate Chrome’s network connection speed to the server.

If you find any mistakes in your translation or other areas that need to be improved, you are welcome to the Nuggets Translation Program to revise and PR your translation, and you can also get the corresponding reward points. The permanent link to this article at the beginning of this article is the MarkDown link to this article on GitHub.

The Nuggets Translation Project is a community that translates quality Internet technical articles from English sharing articles on nuggets. The content covers Android, iOS, front-end, back-end, blockchain, products, design, artificial intelligence and other fields. If you want to see more high-quality translation, please continue to pay attention to the Translation plan of Digging Gold, the official Weibo, Zhihu column.