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

Milica Mihajlija

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

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

瀏覽器支援

• 61
• 79
• x
• x

資料來源

用量

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

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

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

運作方式

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

屬性	說明
downlink	頻寬估算值 (以百萬位元/秒為單位)。
effectiveType	連線的有效類型，可能的值為 'slow-2g'、'2g'、'3g' 或 '4g' (涵蓋 4g 以上)。根據往返時間和下行連線速度的組合值決定。舉例來說，使用快速向下連結以及高延遲的情況，會因為延遲時間而降低有效類型。
onchange	當連線資訊變更時觸發的事件處理常式。
rtt	連線的預估往返延遲時間 (以毫秒為單位)。
saveData	布林值，定義使用者是否已要求減少資料用量模式。

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

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

注意：您可以在 Service Workers 中存取 Network Information API，以便在使用者離線時做出調整。

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

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

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

注意： 自 62 版起，以 Chromium 為基礎的瀏覽器就支援 Network information API。

結論

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