What Web Can Do Today?

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

Live Demo

• JavaScript

  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.onchange = function (event) {
      updateNetworkInfo(event.target);
    }
    updateNetworkInfo(info);
  }

• HTML

  <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>.

Browser support

Resources

• Specification Draft
• MDN: Network Information API
• Connection-Aware Components