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

Milica Mihajlija

視網路而定，網站的載入速度可能會截然不同 條件。網路連線速度很快時，一切都能順暢運作 出門在外時，數據方案受限、連線不穩，或是停滯不前 圖中說，筆電與 Wi-Fi 連線速度很慢

要解決這個問題，其中一種方法是調整您要向使用者放送的素材資源 並按照連線品質進行分類現在，您可以使用 網路資訊 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 為基礎的瀏覽器支援網路資訊 API。

結論

Network Information API 的潛在效益大幅提高，對於 網路速度較慢的使用者，以及需要大量頻寬的應用程式。最佳結果 但可以做為漸進式增強技術