Network Information

This controller uses the Network Information API to detect changes in the user’s network connection. It emits an event whenever the connection type or state changes (for example, switching from Wi-Fi to 4G).

Usage

<div data-controller="network-info">
  <p id="network-status">Loading network info...</p>
</div>

<script type="module">
  const el = document.querySelector('[data-controller="network-info"]');

  el.addEventListener('network-info:change', (e) => {
    const c = e.detail.connection;
    document.getElementById('network-status').textContent =
      `Type: ${c.effectiveType}, Downlink: ${c.downlink} Mbps, RTT: ${c.rtt} ms`;
  });
</script>

Parameters

None

Actions

None

Targets

None

Events

change: Emitted on controller connection and every time the browser detects a change in network conditions. Contains the NetworkInformation object with

• effectiveType: the estimated connection type ('slow-2g', '2g', '3g', '4g', etc.)

• downlink: estimated bandwidth in megabits per second

• rtt: estimated round-trip latency in milliseconds

• saveData: true if the user has enabled data-saver mode

• type: (optional) connection medium ('wifi', 'cellular', 'ethernet', 'none', etc., when supported)