Getting Network Information with Javascript

javascript
Published on May 25, 2019

The Network Information API gives an idea of the underlying network that is device is using. Getting the type of the network, whether cellular or broadband, or getting the network speed may help your application in giving a suitable experience to the end user. For example if the application finds out that the current network speed is quite low, it may choose to skip showing heavy background images so that the page loads fast.

The navigator.connection is an object that gives access to the various network properties.

Demo

See information for your current network type below :

Getting the Network Type

  • The navigator.connection.type property gives the theoretical network type. It is not the actual network quality that is experienced by the user.

    var type = navigator.connection.type;

    This network type will be one of following values : bluetooth, cellular, ethernet, none, wifi, wimax, other and unknown.

    The value none represents there is no internet connection.

  • navigator.connection.effectiveType gives the actual real-time network type. It is calculated by the browser using the round-trip time and downlink values.

    var effective_type = navigator.connection.effectiveType;

    This network type will be one of following values : slow-2g, 2g, 3g and 4g.

Getting Downlink Speed

Downlink speed is different from download speed. It represents the connection speed between your device and the network connection device. Example, in case of a WiFi it represents the speed between your device and the WiFi router, which is different from the actual download speed that you get when you download a file.

  • The navigator.connection.downlinkMax property gives the maximum downlink speed of the network technology as megabits per second (Mb/s). It is mostly theoretical and does not represent the real-time downlink speed experienced by the user.

    var downlink_max = navigator.connection.downlinkMax;

  • navigator.connection.downlink gives the effective real-time downlink speed experienced by the user. It is given in Mb/s.

    var downlink = navigator.connection.downlink;

Getting the Round-Trip Time

Round-trip time (RTT) is the time in milliseconds that is taken by a network request from a starting point to a destination, and again back from the destination to the starting point. RTT is an important metric that gives an idea of the network speed.

You can get the round-trip time through the navigator.connection.rtt property.

var rtt = navigator.connection.rtt;

Detecting Change in Network

Sometimes it may be useful for the application to detect a change in network. For example, the application may choose not to download a file when the network type is 2g. However when the network changes to a 4g network, the application can start to download the file.

Network change can be detected through the change event on navigator.connection object.

navigator.connection.addEventListener('change' function() {
	// network change
});

Browser Compatibility

Network Information API is supported in Chrome & Edge.

In this Tutorial