[譯]使用 JavaScript 和網路資訊 API 實現自適應服務
navigator.connection.effectiveType 可以根據使用者的網路連線質量得出不同的結果
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。
如何應對網路連線質量的變化呢？我們可以通過 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“:
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> 複製程式碼
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 、 前端 、 後端 、 區塊鏈 、 產品 、 設計 、 人工智慧 等領域，想要檢視更多優質譯文請持續關注 掘金翻譯計劃 、官方微博、 知乎專欄 。