[譯]使用 JavaScript 和網路資訊 API 實現自適應服務

0x7e2發表於2019-03-01

使用 JavaScript 和網路資訊 API 實現自適應服務

navigator.connection.effectiveType 可以根據使用者的網路連線質量得出不同的結果

[譯]使用 JavaScript 和網路資訊 API 實現自適應服務

effectiveTypeNetwork Information API 的一個屬性,在 JavaScript 中通過 navigator.connection 物件在呼叫。在 Chrome 瀏覽器中,你可以把以下內容放入 DevTools 中來檢視有效的連線型別(ECT):

console.log(navigator.connection.effectiveType); // 4G
複製程式碼

effectiveType 可取值有 'slow-2g'、'2g'、'3g' 或者 '4g'。在網速慢的時候,此功能可以讓你通過提供較低質量的資源來提高頁面的載入速度。

在 Chrome 62 之前,我們只向開發者公佈了理論上的網路連線型別(通過 navigator.connection.type)而不是客戶端實際的網路連線質量。

Chrome 的有效連線型別目前是使用最近觀察到的往返時間(rtt)和下行鏈路值的組合來確定。

它將測量到的網路連線效能總結為最接近的蜂窩網路連線型別(比如 2G),即使你實際連線的的 WiFi。如圖所示,你連線了星巴克的WiFi,但是實際上你的有效網路型別是 2G 或者 3G。

[譯]使用 JavaScript 和網路資訊 API 實現自適應服務

如何應對網路連線質量的變化呢?我們可以通過 connection.onchange 事件監聽器來監聽網路變化:

function onConnectionChange() {
    const { rtt, downlink, effectiveType,  saveData } = navigator.connection;

    console.log(`有效網路連線型別: ${effectiveType}`);
    console.log(`估算的下行速度/頻寬: ${downlink}Mb/s`);
    console.log(`估算的往返時間: ${rtt}ms`);
    console.log(`開啟/請求資料保護模式: ${saveData}`);
}

navigator.connection.addEventListener('change', onConnectionChange)
複製程式碼

下面是一個快速測試,我在 DevTools 中模擬了一個 “低網速的手機” 的配置,並且能夠從 “4g” 切換到 ”2g“:

[譯]使用 JavaScript 和網路資訊 API 實現自適應服務

effectiveType 在安卓上的 Chrome、Opera 和 Firefox 得到了支援,有些其它的網路質量提示可以在 navigator.connection 中檢視,包括 rttdownlinkdownlinkMax

我在基於 Vue.js 的開源專案 —— Google Doodles 應用中使用過 effectiveType。基於 ECT 值,我們可以通過使用資料繫結就能夠把 connection 屬性設定為 fast 或者 slow。大致如下:

if (/\slow-2g|2g|3g/.test(navigator.connection.effectiveType)) {
  this.connection = "slow";
} else {
  this.connection = "fast";
}
複製程式碼

這可以讓我們去根據使用者的有效連線型別呈現不同的輸出(視訊或者低解析度圖片)。

   <template>
      <div id="home">
        <div v-if="connection === 'fast'">
          <!-- 1.3MB video -->
          <video class="theatre" autoplay muted playsinline control>
            <source src="/static/img/doodle-theatre.webm" type="video/webm">
            <source src="/static/img/doodle-theatre.mp4" type="video/mp4">
          </video>
        </div>
        <!-- 28KB image -->
        <div v-if="connection === 'slow'">
          <img class="theatre" src="/static/img/doodle-theatre-poster.jpg">
        </div>
      </div>
   </template>
複製程式碼

[譯]使用 JavaScript 和網路資訊 API 實現自適應服務

Max Böck 寫了一篇關於使用 React 網路感知元件的文章,蠻有意思。他提出瞭如何根據網路速度渲染不同的元件:

switch(connectionType) {
    case '4g':
        return <Video src={videoSrc} />

    case '3g':
        return <Image src={imageSrc.hires} alt={alt} />

    default:
        return <Image src={imageSrc.lowres} alt={alt} />
}
複製程式碼

注意:你可以將 effectiveType 和 Service Workers 搭配使用來應對由於慢速連線而離線了的使用者。

除錯的話,你可以使用 Chrome flag "force-effective-connection-type" 來覆寫網路質量估算,這個 flag 可以在 chrome://flags 中設定。DevTools 網路模擬也可以也可以為 ETC 提供有限的除錯體驗。

effectiveType 值也同樣可以通過客戶端提示公開,允許開發者將 Chrome 的網路連線速度傳達給伺服器。

如果發現譯文存在錯誤或其他需要改進的地方,歡迎到 掘金翻譯計劃 對譯文進行修改並 PR,也可獲得相應獎勵積分。文章開頭的 本文永久連結 即為本文在 GitHub 上的 MarkDown 連結。


掘金翻譯計劃 是一個翻譯優質網際網路技術文章的社群,文章來源為 掘金 上的英文分享文章。內容覆蓋 AndroidiOS前端後端區塊鏈產品設計人工智慧等領域,想要檢視更多優質譯文請持續關注 掘金翻譯計劃官方微博知乎專欄

相關文章