視網路狀況而定，網站載入體驗可能會截然不同。即使網路連線速度較快，一切功能通常都能順利進行，但如果您使用有限的數據傳輸資費方案，且網路連線不穩，或掛著筆記型電腦的 Wi-Fi 速度很慢，則情況有所不同。
要解決這個問題，其中一個方法是根據使用者的連線品質，調整向使用者提供的資產。但現在有了 Network Information API，網頁應用程式得以存取使用者網路的相關資訊。
使用方式
您可以透過多種方式使用這些網路資訊來改善使用者體驗：
- 根據使用者網路切換提供高畫質和低畫質內容。
- 決定是否要預先載入資源。
- 當使用者網路連線速度緩慢時，延後上傳和下載作業。
- 如果網路品質不足以載入應用程式及使用功能，請啟用離線模式。
- 在使用者透過行動網路執行特定操作 (例如觀看影片) 時發出警告，導致使用者需要付費。
- 將這些資料用於數據分析，收集使用者的網路品質資料。
許多應用程式都已採用類似的策略。舉例來說，YouTube、Netflix 和大多數其他影片 (或視訊通話) 服務會在串流期間自動調整解析度。在載入 Gmail 時，會提供「載入基本 HTML (針對緩慢連線適用)」的連結。
運作方式
navigator.connection 物件包含用戶端連線的相關資訊。下表中的屬性說明其屬性。
| 屬性 | 說明 |
|---|---|
downlink |
頻寬預估 (以百萬位元/秒為單位)。 |
effectiveType |
連線的有效類型，可能的值為 'slow-2g'、'2g'、'3g' 或 '4g' (涵蓋 4g 以上)。取決於往返時間和下行速度的組合。舉例來說，如果快速中斷連結搭配高延遲，就會因為延遲時間而降低 EffectiveType 的值。 |
onchange |
在連線資訊變更時觸發的事件處理常式。 |
rtt |
連線的預估往返延遲時間 (以毫秒為單位)。 |
saveData |
布林值，用來定義使用者是否要要求縮減數據用量模式。 |
在瀏覽器控制台中執行此程式碼時，畫面會如下所示：
effectiveType 值也可以透過用戶端提示取得，可讓您將瀏覽器的連線類型傳送至伺服器。
onchange 事件監聽器可讓您動態因應網路品質的變化。如果因網路狀況不佳而延遲上傳或下載，您可以使用事件監聽器在偵測到更好的網路狀況時重新啟動移轉作業。也可以使用網路品質變更時通知使用者。舉例來說，如果裝置遺失 Wi-Fi 訊號且連上行動網路，可能會導致資料意外傳輸 (並產生費用 💸?)。
使用 onchange 事件監聽器，方法與使用其他事件監聽器相同：
navigator.connection.addEventListener('change', doSomethingOnChange);
結語
Network Information API 的潛在優點相當可觀，對於網路速度緩慢和需要大量頻寬的應用程式的使用者而言更是如此。最棒的是，此工具可做為漸進式強化技術使用。