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

Milica Mihajlija
Milica Mihajlija

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

要解決這個問題,其中一種方法是調整您要向使用者放送的素材資源 並按照連線品質進行分類現在,您可以使用 網路資訊 API 使網頁應用程式得以存取使用者網路的相關資訊。

瀏覽器支援

  • Chrome:61.
  • Edge:79,
  • Firefox:不支援。
  • Safari:不支援。

資料來源

用量

您可以運用多種方式運用這類網路資訊,提升使用者體驗 體驗:

  • 根據以下條件,在提供高畫質和低畫質內容間切換: 網路。
  • 決定是否要預先載入資源。
  • 當使用者連線速度緩慢時,延遲上傳和下載作業。
  • 如果網路品質不夠理想,無法載入應用程式,請啟用離線模式 並使用相關功能
  • 警告使用者透過行動網路進行特定操作 (例如觀看影片) 可能會費用 他們的資金
  • 在分析中使用該功能收集使用者這個網路品質

許多應用程式都已執行類似的作業。例如 YouTube Netflix 和大部分的其他視訊 (或視訊通話) 服務會自動調整 以及解析度在載入 Gmail 時,使用者可以 「載入基本 HTML (適用於緩慢連線)」連結。

使用者在連線速度緩慢時載入 Gmail 基本 HTML 版本的連結

運作方式

navigator.connection 物件包含用戶端的 以獲得最佳效能和最安全的連線表格下方的說明會說明此屬性的屬性。

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

在瀏覽器的控制台中執行它會如下所示:

Chrome 開發人員工具控制台顯示 navgator.connection 物件的屬性值

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

onchange 事件監聽器可讓您根據 這個網路品質網路品質不佳導致上傳或下載作業延遲 條件,您就能仰賴事件監聽器在轉乘時重新開始傳輸作業 可偵測出更準確的網路狀況您也可以在出現以下情況時, 網路品質變更舉例來說,如果 Wi-Fi 訊號中斷, 網路掉到行動網路,以防資料意外傳輸。 收費 💸?)。

使用 onchange 事件監聽器,就像使用任何其他事件監聽器:

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

結論

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