JavaScript オフライン検出方法

JavaScriptでインターネット接続がオフラインかどうか検出する

JavaScriptでは、navigator.onLineプロパティを使って、デバイスがインターネットに接続されているかどうかを検出できます。このプロパティは、ブール値を返します。

navigator.onLineの利用

if (navigator.onLine) {
  // インターネット接続あり
  console.log("Online");
} else {
  // インターネット接続なし
  console.log("Offline");
}

onlineとofflineイベントのリスナー

window.addEventListenerを使って、onlineとofflineイベントのリスナーを登録することで、接続状態の変化を検出できます。

window.addEventListener('online', () => {
  console.log('Online');
});

window.addEventListener('offline', () => {
  console.log('Offline');
});

AJAXリクエストのエラー処理

AJAXリクエストのエラーハンドラーを使って、ネットワークエラーを検出することもできます。

function makeRequest() {
  const xhr = new XMLHttpRequest();
  xhr.open('GET', 'https://api.example.com/data');
  xhr.onload = () => {
    if (xhr.status === 200) {
      // 成功
      console.log(xhr.responseText);
    } else {
      // エラー
      console.error('Request failed: ' + xhr.statusText);
    }
  };
  xhr.onerror = () => {
    console.error('Network error');
  };
  xhr.send();
}

navigator.serviceWorkerの利用 (PWAの場合)

Progressive Web Apps (PWA)では、navigator.serviceWorkerを使って、オフラインキャッシュやバックグラウンドタスクを実現できます。これにより、オフラインでも一部の機能を提供することができます。

注意

• オフラインキャッシュやバックグラウンドタスクの実装は、複雑な処理が必要となる場合があります。
• ネットワーク条件やデバイスの状態によって、接続状態が頻繁に変化する可能性があります。
• navigator.onLineはブラウザの判断に依存するため、常に正確な結果が得られるとは限りません。

JavaScriptでのオフライン検出：コード例解説

コード例1: navigator.onLine を利用したシンプルな検出

if (navigator.onLine) {
  console.log("オンラインです");
} else {
  console.log("オフラインです");
}

• if文 で、オンライン状態かオフライン状態かによって処理を分岐します。
• navigator.onLine は、デバイスがオンラインかどうかを示すブール値を返します。

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

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

• 接続状態が変化するたびに、登録された関数が呼び出されます。
• addEventListener メソッドを使って、online イベントと offline イベントが発生した際に実行される関数（コールバック関数）を登録します。

function makeRequest() {
  const xhr = new XMLHttpRequest();
  xhr.open('GET', 'https://api.example.com/data');
  xhr.onload = () => {
    if (xhr.status === 200) {
      // 成功
      console.log(xhr.responseText);
    } else {
      // エラー
      console.error('リクエスト失敗: ' + xhr.statusText);
    }
  };
  xhr.onerror = () => {
    console.error('ネットワークエラーが発生しました');
  };
  xhr.send();
}

• onerror イベントハンドラーで、ネットワークエラーが発生した場合に実行される処理を定義します。
• XMLHttpRequest オブジェクトを使って、サーバーにリクエストを送信します。

コード例4: Service Worker の利用 (PWA の場合)

if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/service-worker.js')
      .then(registration => {
        console.log('Service Wo   rker が登録されました');
      })
      .catch(error => {
        console.error('Service Worker の登録に失敗しました', error);
      });
  });
}

• Service Worker は、オフラインキャッシュやプッシュ通知などの機能を提供できます。
• serviceWorker API を利用して、Service Worker を登録します。

各コード例の解説

• Service Worker は、より高度なオフライン機能を実現したい場合に利用します。
• AJAX リクエストのエラー処理 は、特定のリクエストの失敗を検出する際に役立ちます。
• online と offline イベントは、接続状態の変化をリアルタイムで監視するのに適しています。
• navigator.onLine は、シンプルなオンライン状態の確認に便利です。

注意事項

• Service Worker の実装は、比較的複雑なため、注意が必要です。

より詳細な情報については、以下のキーワードで検索することをおすすめします。

• Service Worker
• AJAX エラー処理
• offline イベント
• JavaScript オフライン検出

Ping (ICMP) テスト

• デメリット
  クロスオリジンポリシーの問題、ブラウザの制限など。
• メリット
  より積極的な接続確認が可能。
• 原理
  特定のサーバーにPingを送信し、応答があるかどうかで接続状態を判断します。

function pingServer(url) {
  const img = new Image();
  img.onload = img.onerror = () => {
    // 読み込み成功/失敗で接続状態を判断
  };
  img.src = url + '?_t=' + Date.now();
}

タイムアウト付きのリクエスト

• デメリット
  サーバーの応答速度に依存。
• メリット
  シンプルな実装。
• 原理
  特定のURLにリクエストを送信し、一定時間内に応答がない場合にオフラインと判断します。

function checkConnection(url) {
  const xhr = new XMLHttpRequest();
  xhr.open('GET', url);
  xhr.timeout = 2000; // 2秒でタイムアウト
  xhr.onload = () => {
    // 成功
  };
  xhr.onerror = xhr.ontimeout = () => {
    // エラーまたはタイムアウト
  };
  xhr.send();
}

サードパーティライブラリ

• デメリット
  外部ライブラリへの依存。
• メリット
  既に実装された機能を利用できる。

代表的なライブラリ:

• is-online
  Node.js向けのライブラリ。
• Online-offline.js
  シンプルなオンライン/オフライン検出。

ブラウザ拡張機能

• デメリット
  ユーザーにインストールしてもらう必要がある。
• メリット
  バックグラウンドで常時監視可能。

• IndexedDB
  ローカルストレージへのアクセス状況から接続状態を推測する。
• WebSockets
  長期的な接続状態の監視に適している。

各方法の比較と選択