オンライン、オフラインに応じて処理を振り分ける方法

Programming

今回の記事ではJavaScriptでネットワーク通信がオンラインの時とオフラインの時で処理を振り分ける方法を紹介します。

WEBサイトを閲覧している際に、オフライン状態で画面が表示されなかった場合に何かしらのアラートがあったら安心すると思います。

最近のWEBサイトにはあまり見かけないですが、実はプログラムでオフライン状態を検知して、ネットワーク通信が出来ていない場合に「ネットワークに繋がっていません」などの任意のアラートを表示する技術は存在します。

今回はその方法を紹介します。

こんな場合に使用

  • ユーザーの環境がオンラインとオフラインを判断したい
  • オフラインの場合にアラートを表示したい

難易度(MAX10)★★★★☆☆☆☆☆☆

JSでオンライン/オフラインに応じて処理を振り分ける方法

プロパティ意味
navigator.onLineネットワーク状況を取得

JavaScriptでネットワーク環境の状況を取得するにはnavigator.onLineを使用します。
そしてtrue(真)の時には通常通り「オンライン」、それ以外の場合は「ネットワークに繋がっていません」とのアラートを出します。

実際の記述は以下。

const isOnline = navigator.onLine;
if (isOnline === true) {
    console.log('オンラインです')
} else {
    alert('❎ ネットワークに繋がっていません')
}

オフラインの場合は以下の様に「❎ ネットワークに繋がっていません」とアラートが表示されます。

オンラインの時は表面では何も表示されません。コンソールを確認すると「オンラインです」と表示されています。


以上が「オンライン、オフラインに応じて処理を振り分ける方法」でした。

例えば地下鉄に乗っていてネットワークが切れた際にこのアラートが出てきてくれれば、ユーザーは戸惑わずにしばらく待ってからまたアクセスしてくれるでしょう。

この記事を書いた人
KEITO

AI × IT × WEB3|関東在住。本職はディレクター 。AIを活用してビジネス開拓。仕事の依頼はTwitterからお願いします。YouTube、Twitter、Instagramもお願い致します。

Programming
この記事を共有する
スポンサーリンク
スポンサーリンク
KT LIFE
スポンサーリンク

暗号資産投資するなら以下

Bybit

国内人気No.1!屈強なサーバー/信頼性抜群!トレーダー御用達の取引所。

通貨数338種以上
レバレッジ最大100倍
現物取引手数料Maker:0%〜0.1%
Taker:0.02%〜0.1%
先物取引手数料Maker:0%〜0.01%
Taker:0.03%〜0.06%
操作性スマホでも取引・入金できる
口座開設簡単に口座開設できる
日本語対応日本語対応あり・JPY利用可
特典下記から登録で初回ボーナスあり
登録リンクBybitへの登録は こちら
招待コード22295
レビュー記事レビュー記事は こちら
BigBoss&CRYPTOS

最大レバレッジ1111倍・日本円換金ルート

通貨数BigBoss:15種以上
CRYPTOS:15種以上
レバレッジ最大1111倍
スポット手数料Maker:0.02%〜0.18%
Taker:0.05〜0.20%
先物取引手数料
操作性スマホでも取引・入金できる
口座開設少し敷居が高い
日本語対応日本語対応あり
特典下記から登録で初回ボーナスあり
登録リンクBigBossへの登録は こちら
招待コード6690951
レビュー記事レビュー記事は こちら
Nexo

高APYでのステーキング&レンディング

通貨数60種以上
レバレッジ
スポット手数料Maker:0.04%〜0.20%
Taker:0.03%〜0.20%
先物取引手数料
操作性スマホでも取引・入金できる
口座開設簡単に口座開設できる
日本語対応日本語対応あり
特典下記から登録で初回ボーナスあり
登録リンクNexoへの登録は こちら
招待コード
レビュー記事レビュー記事は こちら

他おすすめ取引所はこちら

タイトルとURLをコピーしました