How to Get Information About User Network Connection in JavaScript

Web API has many interesting and useful things for different use cases, one of them is Network Information API and today I explain you how to use it and why.

3 min readJan 9, 2021

Introduction

Different users have different internet connections, it can be 3G or stable Ethernet/WiFi etc. Sometimes the Cellular internet connection in mobile devices changes from 4G to 3G or even disappears and user go offline. We as developers can react to this changes and provide functionalities for different cases, such as showing notifications or suggest not downloading complex media content.

Connection Type

We can find out which connection type is used, to do this we need to get value of type property in NetworkInformation object:

const connectionType: string = navigator.connection.type;console.log(connectionType); // cellular

In this case we get ‘celullar’ value, but there are many other possible values which are listed in ConnectionType enum:

enum ConnectionType {
  "cellular",
  "wifi",
  "wimax",
  "bluetooth",
  "ethernet",
  "mixed",
  "other",
  "unknown",
  "none"
};

All possible values speak for themselves, but let me explain about “none” and “unknown” values. “none” is equivalent to navigator.onLine = false, this means that the user is offline or doesn’t have internet connection at the time. “unknown” means that user has internet connection but is unable, or unwilling, to determine the his connection technology.

Effective Connection Type (ECT):

It can be useful to determine how fast user’s internet connection is:

const ect: string = navigator.connection.effectiveType;console.log(ect); // 4g

There are 4 possible values:

enum EffectiveConnectionType {
  "slow-2g",
  "2g",
  "3g",
  "4g"
};

Let me explain these values:

slow-2g —when user has 0–50 Kbps internet speed, page loads very slow, don’t recommended to show any media content such as images, videos, audio etc.
2g — when user has 50–70 Kbps internet speed, looks like slow-2g, but we can show small images.
3g — normal 70–700 Kbps internet speed, user can load images, LQ videos or audio.
4g — good internet speed from 700 Kbps to infinity, suited for any media content.

RTT

RTT — is the time that the user spent on sending the signal and the time after it was confirmed that the signal was received on the other side.

const rtt: number = navigator.connection.rtt; // get rtt time in millisecondsconsole.log(rtt); // 100

This value is rounded to nearest multiple of 25 milliseconds.

Downlink

Downlink is the effective bandwidth estimate in MB/s, rounded to nearest multiple of 25 KBP/s.

const downlink: number = navigator.connection.downlink;console.log(downlink); // 2.8

How to find out about changing the Internet connection

NetworkInformation API has onchange event handler which runs every time when the network connection in user agent changes, we can implement our own handler to track this changes and react them.

navigator.connection.addEventListener('change', (event: Event) => {
  console.log(event.currentTarget.effectiveType);
});

Try to change your internet connection in Network DevTools Panel and you see your changes in console, that’s great! Also you can disable and again enable WiFi connection on your laptop, browser also track this changes. Then you yourself can come up with your own script for processing these changes!

Browser Compatibility

This API is not supported in all browsers and before using it, you need to confirm that this API is supported on user agent. Safari mobile/desktop, IE doesn’t support this API. You can learn more by visit CanIUse website.

Bonus for Angular developers

If you Angular developer you can write DI token to safely use this API:

import { InjectionToken } from '@angular/core';export const NETWORK_INFORMATION: InjectionToken<NetworkInformation | null> = new InjectionToken('Network Information API', {
  factory: () => {
    if (window?.navigator?.connection) {
      return window.navigator.connection;
    }
  },
});

Conclusion

Thanks for reading this article, I hope it helps you to understand how to use this API and why it can be useful. If it helps you, please give me some clap! :)