Network Information API

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Note: This feature is available inWeb Workers.

TheNetwork 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 interface consists of a singleNetworkInformation object, an instance of which is returned by theNavigator.connection property or theWorkerNavigator.connection property.

Interfaces

NetworkInformation: 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. TheNetworkInformation interface cannot be instantiated. It is instead accessed through theNavigator interface or theWorkerNavigator interface.

Extensions to other interfaces

Navigator.connectionRead only: Returns aNetworkInformation object containing information about the network connection of a device.
WorkerNavigator.connectionRead only: Provides aNetworkInformation object containing information about the network connection of a device.

Examples

Detect connection changes

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

let type = navigator.connection.effectiveType;function updateConnectionStatus() {  console.log(    `Connection type changed from ${type} to ${navigator.connection.effectiveType}`,  );  type = navigator.connection.effectiveType;}navigator.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 thepreloadVideo flag is set tofalse. For simplicity and clarity, this example only tests for one connection type. A real-world use case would likely use a switch statement or some other method to check all of the possible values ofNetworkInformation.type. Regardless of thetype value you can get an estimate of connection speed through theNetworkInformation.effectiveType property.

let preloadVideo = true;const connection = navigator.connection;if (connection) {  if (connection.effectiveType === "slow-2g") {    preloadVideo = false;  }}