What is the Network Information API in JavaScript?

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.