mozilla

Revision 451931 of Network Information API

  • Revision slug: WebAPI/Network_Information
  • Revision title: Network Information API
  • Revision id: 451931
  • Created:
  • Creator: Jeremie
  • Is current revision? No
  • Comment

Revision Content

{{ SeeCompatTable() }}

The Network Information API provides information about the system's connection, such as the current bandwidth of the user's device or whether the connection is metered. This can be used to select high definition content or low definition content based on the user's connection. The entire API consists of the addition of a single object to the DOM: {{domxref("window.navigator.connection")}}.

Detecting connection changes

This example watches for changes to the user's connection. This is similar to how an app would be alerted when the user moves from a high-cost connection to a low-cost one, for example, in order to reduce bandwidth demands to prevent the user from racking up substantial charges.

var connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;

function updateConnectionStatus() {
  alert("Connection bandwidth: " + connection.bandwidth + " MB/s");
  if (connection.metered) {
    alert("The connection is metered!");
  }
}

connection.addEventListener("change", updateConnectionStatus);
updateConnectionStatus();

Specifications

Specification Status Comment
{{ SpecName('Network Information', '', 'Network Information API') }} {{ Spec2('Network Information') }} Initial specification

Browser compatibility

{{Page('/en-US/docs/Web/API/window.navigator.connection','Browser compatibility')}}

See also

  • {{ spec("http://dvcs.w3.org/hg/dap/raw-file/tip/network-api/Overview.html", "Network Information API Specification", "ED") }}
  • Online and offline events
  • {{domxref("window.navigator.connection")}}

Revision Source

<p>{{ SeeCompatTable() }}</p>
<p>The Network Information API provides information about the system's connection, such as the current bandwidth of the user's device or whether the connection is metered. This can be used to select high definition content or low definition content based on the user's connection. The entire API consists of the addition of a single object to the DOM: {{domxref("window.navigator.connection")}}.</p>
<h2 id="Detecting_connection_changes">Detecting connection changes</h2>
<p>This example watches for changes to the user's connection. This is similar to how an app would be alerted when the user moves from a high-cost connection to a low-cost one, for example, in order to reduce bandwidth demands to prevent the user from racking up substantial charges.</p>
<pre class="brush: js">
var connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;

function updateConnectionStatus() {
  alert("Connection bandwidth: " + connection.bandwidth + " MB/s");
  if (connection.metered) {
    alert("The connection is metered!");
  }
}

connection.addEventListener("change", updateConnectionStatus);
updateConnectionStatus();
</pre>
<h2 id="Specifications" name="Specifications">Specifications</h2>
<table class="standard-table">
  <thead>
    <tr>
      <th scope="col">Specification</th>
      <th scope="col">Status</th>
      <th scope="col">Comment</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>{{ SpecName('Network Information', '', 'Network Information API') }}</td>
      <td>{{ Spec2('Network Information') }}</td>
      <td>Initial specification</td>
    </tr>
  </tbody>
</table>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<p>{{Page('/en-US/docs/Web/API/window.navigator.connection','Browser compatibility')}}</p>
<h2 id="See_also">See also</h2>
<ul>
  <li>{{ spec("http://dvcs.w3.org/hg/dap/raw-file/tip/network-api/Overview.html", "Network Information API Specification", "ED") }}</li>
  <li><a href="/en/Online_and_offline_events" title="en/Online_and_offline_events">Online and offline events</a></li>
  <li>{{domxref("window.navigator.connection")}}</li>
</ul>
Revert to this revision