Recipe 14.2

Reading the Network Status

Compatibility Note: Network Information API

This feature may not be supported on all browsers yet. Please check the latest compatibility data before using in a production application.

Browser support for Network Information API

Demo

Approximate network speed: --
Approximate download bandwidth: --

Code

JavaScript

if (navigator.connection) {
  const network = navigator.connection;

  if (network.effectiveType) {
    document.querySelector('#network-speed').textContent = network.effectiveType;
  }

  if (network.downlink) {
    document.querySelector('#network-bandwidth').textContent = `${network.downlink}Mbps`;
  }
} else {
  document.querySelector('#supported').classList.add('d-none');
  document.querySelector('#not-supported').classList.remove('d-none');
}

HTML

<div id="supported">
  <ul>
    <li>Approximate network speed: <span id="network-speed">--</span></li>
    <li>Approximate download bandwidth: <span id="network-bandwidth">--</span></li>
  </ul>
</div>

<div id="not-supported" class="d-none">
  Your browser does not support the Network Information API.
</div>