根據網路品質自動調整放送

Milica Mihajlija

載入網站的體驗可能會因網路狀況而有很大差異。在網路速度快的情況下，一切通常都會順利進行，但如果您在外出時使用有限的行動數據方案和不穩定的連線，或是在咖啡店使用筆記型電腦連上速度緩慢的 Wi-Fi 網路時，情況就會有所不同。

解決這個問題的方法之一，就是根據使用者的連線品質調整您要向使用者放送的素材資源。這項功能現在可透過 Network Information API 實現，讓網頁應用程式存取使用者網路的相關資訊。

用量

您可以透過多種方式使用這類網路資訊來改善使用者體驗：

• 根據使用者的網路切換提供高畫質和低畫質的內容。
• 決定是否要預先載入資源。
• 當使用者連線速度緩慢時，延遲上傳和下載作業。
• 如果網路品質不佳，無法載入應用程式並使用相關功能，請啟用離線模式。
• 提醒使用者，透過行動網路進行某些操作 (例如觀看影片) 可能會產生費用。
• 供您在分析中使用這項功能來收集使用者的網路品質資料。

許多應用程式都已執行類似的操作。舉例來說，YouTube、Netflix 和大部分的其他視訊 (或視訊通話) 服務會在串流期間自動調整解析度。在 Gmail 載入時，系統會為使用者提供「載入基本 HTML (適用於連線速度較慢的情況)」的連結。

運作方式

navigator.connection 物件包含用戶端連線的相關資訊。表格下方的說明會說明此屬性的屬性。

在瀏覽器的控制台中執行時，畫面會如下所示：

您也可以透過用戶端提示取得 effectiveType 值，並將瀏覽器的連線類型傳達給伺服器。

onchange 事件監聽器可讓您動態適應網路品質的變化。如果您因為網路狀況不佳而導致上傳或下載作業延遲，您可以在偵測到更適當的網路條件時，由事件監聽器重新啟動移轉作業。您也可以在網路品質變更時通知使用者。舉例來說，如果裝置遺失 Wi-Fi 訊號且遭中斷至行動網路，這可以防止意外轉移資料 (及充電 💸?)。

使用 onchange 事件監聽器的方式與其他事件監聽器相同：

navigator.connection.addEventListener('change', doSomethingOnChange);

結論

Network Information API 的潛在優勢十分顯著，特別是對於使用速度緩慢的網路和需要大量頻寬的應用程式而言。最重要的是，它可以用來做漸進式增強技巧。