JavaScriptとネットワーク情報APIを用いた適応サービス

navigator.connection.effectiveType ユーザーのネットワーク接続の品質に基づいて異なる資産を提供するのに便利です.

effectiveType はNetwork Information API , 経由でJavaScriptに公開navigator.connection オブジェクト.Chromeでは、以下のようにDevToolsにあなたの効果的な接続タイプ( ect )を見ることができます.

console.log(navigator.connection.effectiveType); // 4G

使用可能な値effectiveType ' slow 2 g '、' 2 g '、' 3 g 'または' 4 g 'です.低速接続でこの機能を使用すると、リソースの品質の低いバージョンを提供することによってどのように迅速にページの読み込みを改善することができます.
クロム62の前に、我々は理論的なネットワーク接続タイプを開発者にnavigator.connection.type ) クライアントが実際に経験したネットワーク品質よりもむしろ.
有効な接続タイプのChromeの実装は、最近観察された往復旅行時間(RTT)とダウンリンク値の組合せを使用して決定されます.
それは、実際の接続が無線LANであっても、最も類似しているセルラー接続タイプ(例えば2 g)として、測定されたネットワーク性能をまとめます.つまり、あなたがスターバックスの無線LANにしているが、実際の効果的なネットワークタイプは2 Gまたは3 Gです.

ネットワーク品質の変化についてどうですか?私たちはconnection.onchange 接続の変更を監視するイベントリスナー

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

    console.log(`Effective network connection type: ${effectiveType}`);
    console.log(`Downlink Speed/bandwidth estimate: ${downlink}Mb/s`);
    console.log(`Round-trip time estimate: ${rtt}ms`);
    console.log(`Data-saver mode on/requested: ${saveData}`);
}

navigator.connection.addEventListener('change', onConnectionChange)

下記は、私がdevtoolの「ローエンドモバイル」プロフィールをエミュレートして、「4 G」から「2 G」条件に変わることができた速いテストです:
effectiveType アンドロイドの上でクロム、オペラとFirefoxでサポートされます.他のネットワーク品質のヒントの数が利用可能ですnavigator.connection , 含むrtt , downlink and downlinkMax .
オープンソースプロジェクトeffectiveType インはVueだった.jsGoogle Doodles アプリ.データバインディングを使用すると、connection プロパティfast or slow ECT値に基づきます.概して

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>

マックスBはCKについて面白い記事を書いたnetwork-aware components 反応の使用同様に、ネットワークの速度に基づいて異なるコンポーネントをレンダリングする方法を強調しました.

        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 サービスワーカーとユーザーがオフラインで有効な接続の種類に加えてオフラインに適応する.
デバッグの場合、Chromeフラグを使用してネットワーク品質見積もりをオーバーライドできますchrome://flags.DevToolsネットワークエミュレーションは、ECTのための限られたデバッグ経験を提供することができます.effectiveType 値もClient Hints 開発者にChromeのネットワーク接続速度をサーバーに伝えることができます.
この機能についてさらに詳しく説明します.

Google Chrome Network Information API Sample

Connection-aware components

Dynamic resources using the NetInfo API and service workers

Network-based image loading

Chrome 62 Beta: Network Quality Estimator API

Intent to Ship: NetInfo API extension for network quality

また、この投稿を見つけることができますaddyosmani.com