mozilla

Revision 373695 of Network Information API

  • Revision slug: WebAPI/Network_Information
  • Revision title: Network Information API
  • Revision id: 373695
  • Created:
  • Creator: Sheppy
  • 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();

Browser compatibility

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 20? {{ property_prefix("webkit") }} 12.0 {{ property_prefix("moz") }} (see notes) {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }}
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support {{ CompatNo() }} 12.0 {{ property_prefix("moz") }} (see notes) {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }}

Gecko notes

  • The Network API can be disabled using the dom.network.enabled preference.
  • The metered attribute is false by default and can be set using the dom.network.metered preference (see {{ bug("716943") }} for marking the connection as metered when roaming).
  • As of Gecko 12.0, the Network API is implemented for Android systems only. Support for Linux ({{ bug("712442") }}) and Windows ({{ bug("721306") }}) systems is in progress.
  • Before Gecko 14.0, navigator.mozConnection was not an instance of EventTarget and no addEventListener could be called. This has been fixed ({{ bug("735261") }}).

Specification

  • {{ spec("http://dvcs.w3.org/hg/dap/raw-file/tip/network-api/Overview.html", "Network Information API Specification", "ED") }}

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="Example">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="Browser_compatibility">Browser compatibility</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Chrome</th>
        <th>Firefox (Gecko)</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>20? {{ property_prefix("webkit") }}</td>
        <td>12.0 {{ property_prefix("moz") }} (see notes)</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="compat-mobile">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Android</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>IE Mobile</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>{{ CompatNo() }}</td>
        <td>12.0 {{ property_prefix("moz") }} (see notes)</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
      </tr>
    </tbody>
  </table>
</div>
<h3 id="Gecko_notes">Gecko notes</h3>
<ul>
  <li>The Network API can be disabled using the <code>dom.network.enabled</code> preference.</li>
  <li>The <code>metered</code> attribute is <code>false</code> by default and can be set using the <code>dom.network.metered</code> preference (see {{ bug("716943") }} for <span id="summary_alias_container"><span id="short_desc_nonedit_display">marking the connection as metered when roaming</span></span>).</li>
  <li>As of Gecko 12.0, the Network API is implemented for Android systems only. Support for Linux ({{ bug("712442") }}) and Windows ({{ bug("721306") }}) systems is in progress.</li>
  <li>Before Gecko 14.0, <code>navigator.mozConnection</code> was not an instance of EventTarget and no <code>addEventListener</code> could be called. This has been fixed ({{ bug("735261") }}).</li>
</ul>
<h2 id="Specification">Specification</h2>
<ul>
  <li>{{ spec("http://dvcs.w3.org/hg/dap/raw-file/tip/network-api/Overview.html", "Network Information API Specification", "ED") }}</li>
</ul>
<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