Javascriptでユーザ端末がオンラインか確認する方法
Javascriptでユーザ端末がオフラインかオンラインかを判定する
最近JavascriptとTypescriptで仕事をする機会が増えたのでJavascriptのコーディング技術を磨いています。
直近で作ったアプリだとユーザの端末がオンラインで稼働するのが前提だったため,ユーザ端末がオフラインの場合は警告を出すような処理を実装していました。結構使う処理なのでソースコード含めて紹介していこうと思います。
オンライン/オフライン判定のソースコード
では早速ユーザ端末のネット接続情報を確認するソースコードを書いてみましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<mata charset="UTF-8">
<title>Programming News</title>
<style>
p#test{
background-color: red;
}
</style>
</head>
<body>
<p id = "test">初期状態</p>
<script>
let test = document.getElementById("test")
if(navigator.onLine === true)
{
test.innerHTML = "オンラインです";
}
else
{
test.innerHTML = "オフラインです";
}
</script>
</body>
</html>
すごい簡単ですよね。ちなみにこの場合でブラウザ出力させた場合の画面は以下の通りです。
ちゃんとオンラインですね。実際この記事はYOUTUBEを聞きながら書いているので当然オンラインです。
少し解説しますとネットワーク状況を調べるにはnavigator.onLineのパラメータを調べる必要があります。trueの場合がオンラインでfalseがオフラインです。そのため一定周期でこのプロパティを確認してネットワークが切れたら警告を出すような使い方が主流になります。
一方でユーザの端末がオフライン⇒オンライン,もしくはオンライン⇒オフラインに変化する際に処理を割り込ませる方法もあります。その場合は以下のようにコーディングします。
window.addEventListener('online',() => {
console.log("オンラインになりました");
});
window.addEventListener('offline',() => {
console.log("オフラインになりました");
});
これをscriptタグの中に書くだけでイベント処理を追加できます。
今回の記事はここまでにしたいと思います。
私のサイトでは他にもJavascript関連や画像処理(OpenCV)関連の記事もあげているので興味があれば是非見ていってください。
