Network Information API Sample

Available in Chrome 65+ | View on GitHub | Browse Samples

Background

This demo illustrates the use of the Network Information API to retrieve the current network type and monitor for network type changes.

While it was previously limited to Chrome on Android or on ChromeOS, the Network Information API is now available for Chrome on all platforms, though meaningful values for all of the properties might not be available on every platform.

This code sample reflects the most recent implementation of the API, including the connection.downlinkMax attribute, support for the 'wimax' connection type, and connection.onchange event listener. (The older connection.ontypechange event listener should no longer be used.)

Live Output

JavaScript Snippet

navigator.connection.addEventListener('change', logNetworkInfo);

function logNetworkInfo() {
  // Network type that browser uses
  log('         type: ' + navigator.connection.type);

  // Effective bandwidth estimate
  log('     downlink: ' + navigator.connection.downlink + ' Mb/s');

  // Effective round-trip time estimate
  log('          rtt: ' + navigator.connection.rtt + ' ms');

  // Upper bound on the downlink speed of the first network hop
  log('  downlinkMax: ' + navigator.connection.downlinkMax + ' Mb/s');

  // Effective connection type determined using a combination of recently
  // observed rtt and downlink values: ' +
  log('effectiveType: ' + navigator.connection.effectiveType);
  
  // True if the user has requested a reduced data usage mode from the user
  // agent.
  log('     saveData: ' + navigator.connection.saveData);
  
  // Add whitespace for readability
  log('');
}

logNetworkInfo();