用途
新着
履歴
分類

JS 通信速度の検知

JS 通信速度の検知
現在Chromeではブラウザで通信速度をJacaScriptで計測できます。

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;

公開 2020-01-15 07:23:56
更新 2020-01-19 23:20:29
このページの二次元コード
JS 通信速度の検知

人気のサンプル

search -  category -  about
© 2024 kipure
Top