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

こんにちはtakosanです。

今回はJavaScriptでオンライン・オフラインを取得する方法を紹介します。

では早速いっていみましょう。

navigator.onLineを使う

JavaScriptでオンライン・オフラインを判定するにはnavigator.onLineを使うことができます。

これを使うことでユーザーがオンラインかオフラインかを判断できます。

コードにするとこんな感じ

if (navigator.onLine) {
  console.log("オンラインやで～");
} else {
  console.log("インターネットに接続されていません");
}

また、window.addEventListenerを使用してonlineイベントとofflineイベントを監視することもできます。

こうするとイベントがネットワーク接続の状態が変化したときに発生するようにできます。

コードにするとこんな感じ

window.addEventListener('online', function() {
  console.log("オンラインやで～");
});

window.addEventListener('offline', function() {
  console.log("インターネットに接続されていません");
});

てかnavigatorってなんだ？

navigatorは、Webブラウザ上でJavaScriptを実行するときに利用できるグローバルオブジェクトのうちの1つです。

※グローバルオブジェクトはconsole.log()のconsoleとかsetTImeout()みたいなものです

このオブジェクトは、ブラウザに関する情報を提供するためのプロパティとメソッドを提供します。

navigatorで使えるプロパティには下記のようなものがあります。

注意点

今回はJSでオンライン・オフラインを判定する方法を紹介しました。

実のところ、userAgentなども含め、navigator系のメソッドを使って取得できる情報はすべてが正確とはいえません。

ブラウザ互換の問題やセキュリティ的な理由から取得できない場合も往々にしてあります。

にWebアプリケーションの作成などで本格的にそういったデータが必要な場合は、

バックエンド側でそのような情報を取得できるよう準備しておくのが本来の形かなと思います。

なのでまぁこんな方法もあるくらいに思ってもらえるといいんじゃないかなと思います。