[JavaScript] オンライン・オフラインを判定する

この記事は 2021年4月30日 に書かれたものです

小ネタです。
スマホを使いながら電車などで移動していると通信がプツプツ切れます。家でPCを使う場合と違って通信状況が安定しません。そんな時に活躍するのがブラウザがオンラインかどうかがわかる navigator.onLine です。

このプロパティを参照するだけでブラウザがネットワークに接続しているかチェックすることができるというわけです。

if( navigator.onLine ){
  console.log('オンライン')
}
else {
  console.log('オフライン')
}

WebStorageなどと組み合わせ、オフラインであればローカルにデータを一時的に保存し、オンラインになったら同期をするといった処理が実現できます。

基本的な原理

何らかの処理をする度に接続状態を毎回チェックしても良いのですが、オンラインとオフラインが切り替わったタイミングでイベントが発生します。これをwindow.addEventListenerで補足することが可能です。実際に試すと若干のタイムラグがありますが、実用の範囲内かなと思います。

window.addEventListener('online', (e)=>{
  console.log('オンラインになりました！');
})

window.addEventListener('offline', (e)=>{
  console.log('オフラインです');
})

執筆時点でCan I Useを覗くと主要なブラウザはほぼほぼ対応しているいたいですね。IEやSafariも動いてくれるのは嬉しいところ。

W3Cが策定中のNetwork Information APIを利用すると、どのような方法でネットワークに接続しているか取得することができます。

単純にnavigator.connection.typeを参照すると以下の値が返されます。

またnavigator.connection.downlinkMaxで下りの最大速度や、navigator.connection.effectiveTypeで2g〜4gなどの値が取得でき……る場合がありますｗ

Can I Useによると、現時点では未実装か条件付き実装のブラウザがほとんどですので将来に期待したいところですね。

コメント欄は休止中です。お問い合わせはこちらからどうぞ。ご質問はTwitterにリプを投げてください。

このブログを応援する

お寄せいただいたお気持ちは全額サーバ代や次の記事を執筆するための原資として活用させていただいております。この記事が参考になった場合などぜひご検討ください。

PayPalで300円支払う
※金額は任意で変更できます。
※100円でも泣いて喜びますw
※住所の入力欄が現れた場合は「no needed」を選択ください
これまでのご協力者さま

- Sponsored Link -