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

0x7e2發表於2019-03-01
JavaScriptAPI

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

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

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

effectiveType 是 Network 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 中檢視，包括 rtt，downlink 和 downlinkMax。

我在基於 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 連結。

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

相關文章