Network Type & Speed

The Network Information API allows Web applications to read the current network type and the maximum downlink speed that are assumed based on the underlying connection technology used by the client. It also allows to subscribe for a notification when the network type has changed.

The newest addition (mid-2017), implemented by Chrome on Android as of September 2017, also provides an effective network type information that in turn is calculated using the actual network performance metrics collected by the browser, allowing the Web applications to adjust to the quality of the connection.

API glimpse

navigator.connection.type
Returns the theoretical type of the current connection, based on the underlying connection technology, i.e. cellular, wifi, none etc.
navigator.connection.effectiveType
Returns the information about the quality of the current connection based on recently observed performance metrics, regardless of the underlying connection technology, i.e. slow-2g, 2g, 3g, 4g.
navigator.connection.downlinkMax
Returns the theoretical maxinum downlink speed, in Mbps, for the underlying technology of the current connection.
navigator.connection.addEventListener('change', listener)
An event fired when the connection type has changed.

Live Demo

Current theoretical network type is not available.

Current effective network type is not available.

Current max downlink speed is not available.

  • function getConnection() {
      return navigator.connection || navigator.mozConnection ||
        navigator.webkitConnection || navigator.msConnection;
    }
    
    function updateNetworkInfo(info) {
      document.getElementById('networkType').innerHTML = info.type;
      document.getElementById('effectiveNetworkType').innerHTML = info.effectiveType;
      document.getElementById('downlinkMax').innerHTML = info.downlinkMax;
    }
    
    var info = getConnection();
    if (info) {
      info.addEventListener('change', updateNetworkInfo);
      updateNetworkInfo(info);
    }
  • <p>Current theoretical network type is <b id="networkType">not available</b>.</p>
    <p>Current effective network type is <b id="effectiveNetworkType">not available</b>.</p>
    <p>Current max downlink speed is <b id="downlinkMax">not available</b>.

Resources