navigator.connection.***の値で取得できます。
2020年1月現在、IE,EdgeやSafariではまだ実装されていません。
これをうまく使うと回線速度に応じたコンテンツの出しわけが可能です。
まず、回線のタイプを取得する値です。
effectiveType =
navigator.connection.effectiveType
slow-2g,2g,3g,4gのいずれかの値がとれます。
そのうち5gが出てくるのだと思います。
rtt属性は、有効な往復時間の推定値をミリ秒単位で表します。
Round-Trip Timeの略で通信相手に信号やデータを発信してから、応答が帰ってくるまでにかかる時間の基準値です。
rtt = ms
navigator.connection.rtt
実効帯域幅の推定値をメガビット/秒で表します。
downlink = Kbps
navigator.connection.downlink
基地局やサーバーや通信衛星からユーザーへ向かうの通信速度の基準値です。(くだりと呼ばれる値です)
GoogleのAndroidのデータ使用量を減らすための機能のオンオフを確認できます。
saveData =
navigator.connection.saveData
最後にまとめて表示するサンプルです。
HTML
<div>effectiveType = <span id="demo_effectivetype"></span></div>
<div>rtt = <span id="demo_rtt"></span>ms</div>
<div>downlink = <span id="demo_downlink"></span>Kbps</div>
<div>saveData = <span id="demo_savedata"></span></div>
JSはこちら
nc = navigator.connection;
sorry = 'このブラウザは対応してません';
document.getElementById('demo_effectivetype').textContent = (nc) ? nc.effectiveType : sorry;
document.getElementById('demo_downlink').textContent = (nc) ? nc.downlink : sorry;
document.getElementById('demo_rtt').textContent = (nc) ? nc.rtt : sorry;
document.getElementById('demo_savedata').textContent = (nc) ? nc.saveData : sorry;