Network Information API: How to Access Network Connection Speed Info

This is an
Check the carefully before using this in production.

The Network Information API provides information about the system's
connection in terms of general connection type (e.g., 'wifi', 'cellular', etc.). This can be used to select high definition content or low definition content based on the user's connection. The entire API consists of the addition of the interface and a single property to the interface: .

Note: This feature is available in .

Examples

Detect connection changes

This example watches for changes to the user's connection.

var connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;
var type = connection.effectiveType;

function updateConnectionStatus() {
  console.log("Connection type changed from " + type + " to " + connection.effectiveType);
  type = connection.effectiveType;
}

connection.addEventListener('change', updateConnectionStatus);

Preload large resources

The connection object is useful for deciding whether to preload resources that take large amounts of bandwidth or memory. This example would be called soon after page load to check for a connection type where preloading a video may not be desirable. If a cellular connection is found, then the

preloadVideo

let preloadVideo = true;
var connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;
if (connection) {
  if (connection.effectiveType=== 'cellular') {
    preloadVideo = false;
  }
}

Interfaces

Provides information about the connection a device is using to communicate with the network and provides a means for scripts to be
notified if the connection type changes. The

NetworkInformation

Specifications

Browser compatibility

NetworkInformation

Navigator.connection

See also

• ED

Credits

• Source:
• Published under Open CC Attribution ShareAlike 3.0 licence