Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

javascript
communitycreator

What is the Network Information API in JavaScript?

Programming Bytes

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

Answers Code

The Network Information API is an experimental technologythat allows us to get information about the network connection of the system. This is useful in situations like when deciding on the quality of resources (image, audio, video) based on the network connection.

The network information is available in the connection property of the navigation object.

let connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;

Properties in network information

downlink

The downlink property returns the download speed. The returned downlink represents megabits of data per second.

let downloadSpeed = navigator.connection.downlink + " MB/sec";
console.log(downloadSpeed);

Round trip time (RTT)

The round trip time (RTT) is the time it takes for a packet to be sent and receive its acknowledgment.

The rtt property returns the estimated effective round-trip time of the current connection, rounded to the nearest multiple of 25 milliseconds.

console.log(navigator.connection.rtt);

effectiveType

The effectiveType property returns a cellular connection type. The values can be slow-2g, 2g, 3g, or 4g. The values are evaluated by the browser using the rtt and downlink values.

console.log(navigator.connection.effectiveType)

Try changing the network or adding throttling on the network tab in the developer tools of the browser, then check the effectiveType.

Based on the effectiveType, we can load resources like images and videos in different levels of quality.

saveData

The saveData property returns true if the user has enabled the reduced data usage on the user agent (e.g., browser).

console.log(navigator.connection.saveData);

Event to detect a network status change

We can use the change event in the connection object to detect network info changes.

let conn = navigator.connection;

conn.addEventListener("change", (e) =>{
    console.log("Network status change", navigator.connection);
})

Let’s say we have a video playing on our web page. We can bind the change event to detect the network status, and then reduce or enhance the quality of the video accordingly.

let slowConnection = ['slow-2g', '2g'];
let speedConnection = ['3g', '4g'];

navigator.connection.addEventListener("change", (e) =>{
    let connection = navigator.connection,
        effectiveType = connection.effectiveType,
        isSlowConnection = slowConnection.indexOf(effectiveType) !== -1;
    if(isSlowConnection) {
        console.log("reduce video quality")
    } else {
        console.log("maintain or increase the video quality")
    }
})

In the above code, we added an event listener that will be executed when the network status is changed. Once we receive the event, we will check the effectiveType of the network and change the video quality.

RELATED TAGS

javascript
communitycreator

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

Answers Code
Keep Exploring