---
title: Network Information API
slug: Web/API/Network_Information_API
translation_of: Web/API/Network_Information_API
---
<p>{{ SeeCompatTable() }}</p>
<p>Network Information API 將提供系統連線的相關資訊，如使用者裝置的現有頻寬，或目前的連線狀態。根據使用者的連線情形，可進一步選擇高解析度或低解析度的內容。此完整的 API 另包含 domxref("Connection") 介面，以及 <a href="https://developer.mozilla.org/en-US/docs/Web/API/Navigator" title="The Navigator interface represents the state and the identiy of the user agent. It allows scripts to query it and to register themselves to carry on some activities."><code>Navigator</code></a> 介面的單一屬性 ─ <a href="https://developer.mozilla.org/en-US/docs/Web/API/Navigator.connection" title="The NetworkInformation.connection read-only property represents a Connection containing information about the system's connection, such as the current bandwidth of the user's device or whether the connection is metered. This could be used to select high d"><code>Navigator.connection</code></a>。</p>
<h2 id="偵測連線變化">偵測連線變化</h2>
<p>此範例將觀察使用者連線的變化。舉例來說，當使用者從高價位連線轉用低價位連線時，就會降低頻寬需求以避免連線費用暴增，並採用類似 Apps 受到警示的方法。</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">規格</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="瀏覽器相容性">瀏覽器相容性</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">線上與離線事件</a></li>
  <li>{{domxref("window.navigator.connection")}}</li>
</ul>