It’s common to use screen width or display density to decide which assets to serve a user. But sometimes a user with a larger screen or higher-res device has a poor network connection, and sending them larger images only makes things that much slower for them in loading the site. It would be great if we could account for the network conditions of a specific user in determining what we should send them.

The Network Information API does just that. It’s an API that provides information about the system’s connection in terms or connection type (e.g., ‘wifi’, ‘cellular’, etc.) which we can then use in optimizing their experience.

Usage

Navigator.connection is the main property we’ll take a look at. It’s read-only, and contains some potentially valuable information about the user’s connection.

var connectionInfo = navigator.connection;

This returns an object that has the following properties.

Properties

  • downlink: Returns the effective bandwidth estimate in megabits per second

  • downlinkMax: Returns the maximum downlink speed for the underlying connection technology

  • effectiveType: Returns the effective type of the connection meaning one of ‘slow-2g’, ‘2g’, ‘3g’, or ‘4g’

  • rtt: Returns the estimated effective round-trip time of the current connection

  • type: Returns the type of connection a device is using to communicate with the network. Includes: ‘bluetooth, cellular, ethernet, none, wifi, wimax, other, unknown’

    Note: Currently desktop browsers do not return downlinkMax and type properties.

Events

We can also add listeners for the following event.

  • onchange: Fires when connection information changes

Examples

The obvious benefit of having this information is we can tailor the user’s experience not just based on their screen size, but also how the user is connecting to our site. Is it over wi-fi or cellular? Is it a 3g or 4g, etc?

For instance, we could determine whether to preload resource-intensive assets, such as video, based on network connection–deciding to not preload assets if they’re over cellular.

// from https://developer.mozilla.org/en-US/docs/Web/API/Network_Information_API

let preloadVideo = true;
var connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;

if (connection) {
  if (connection.type === 'cellular') {
    preloadVideo = false;
  }
}

source

Or, we could use service workers to return hi-res or lo-res images depending on the connection. Michael Scharnagl provides an example of this using the effectiveType property.

Support

Unfortunately, the support for this API is minimal right now, with Chrome and Opera being the main browsers to support it for mobile, and Chrome for desktop.

The good news, though, is that although we can’t use this for everyone, we could still use it to progressively enhance our sites for some of our users. And with the potential benefits it could provide once it’s widely available, it’s definitely an API to keep an eye on moving forward.