JavaScriptだけでユーザーのスマホやパソコンがネットに接続されているか確認できることをご存知でしょうか。
近年はゲーム、ツールなど殆どのサービスにインターネットが必須になってきました。
一方で何の拍子にWi Fiが切れてしまった場合、そのままユーザーが操作すると画面が消えたり固まることになるのですが、それらを画面上でお知らせすることができると便利ですよね。
本日はJavaScriptを使ったネット接続の確認方法を紹介します。
また動画もあるので必要に応じて使ってください。
JavaScriptでオンラインかオフラインかを判定する方法
方法はめちゃくちゃ簡単で１行だけです。
const isOnline = navigator.onLine;
console.log(isOnline); // trueかfalseが出力されるnavigator.onLineとするだけで、ユーザーの環境がオンライン（true）かオフライン（false）を判定してくれます。
真偽値で返してくれるので条件分岐も作りやすいですね。
const isOnline = navigator.onLine;
// オンラインかオフラインかで処理を分ける
if(isOnline === true){
console.log("インターネットに接続中です");
}else{
console.log("インターネットから切断されました");
}JavaScriptでオンラインかオフラインかをリアルタイムで監視する
せっかくなのでHTMLも使って画面上でオンラインかオフラインかを表現することもやってみましょう。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./style.css">
<script src="./script.js" defer></script>
</head>
<body>
<p class="results"></p>
</body>
</html>const isOnline = navigator.onLine;
if(isOnline === true){
document.querySelector(".results").innerHTML = "インターネットに接続中です";
}else{
document.querySelector(".results").innerHTML = "インターネットから切断されました";
}
簡単ですが画面上に文言を表示するようにできました。
オフライン時の挙動を確認する際は、同時に立ち上げているアプリなどでオフラインにしても問題ないかを確認した上で試してくださいね。
ちなみにですが上記のコードだとブラウザをリロードしないと文言が切り替わらないようになっています。
実際のケースを想定すると、リアルタイムで判定できた方が良いですよね。
addEventListenerで管理できるwindowオブジェクトのイベントには「online」「offline」というものが既に用意されています。
先ほどのコードのJSファイルの方を以下のように修正してみます。
const isOnline = navigator.onLine;
window.addEventListener("online", () => {
document.querySelector(".results").innerHTML = "インターネットに接続中です";
});
window.addEventListener("offline", () => {
document.querySelector(".results").innerHTML = "インターネットから切断されました";
});動画にあるようにネットの有無でリアルタイムに表示を切り替えることができました。
Webアプリやゲームなど、インターネットが不可欠なサービスを開発される際にはぜひ取り入れましょう。