Ajaxでオフライン時の対応をする

Ajaxでエラーになった際の対応で、オフラインの場合の対応をしたいことがあったので、実装方法をメモしておきます。

サンプルコード

ボタンをクリックした際に、Ajaxでjsonファイルを取得するサンプルで試してみます。

<button id="btn">データ取得</button>

Ajaxでエラーになった場合に、consoleにステータスコードを出すようにします。
まずは正しく取得できる場合です。

$(function() {
  $('#btn').on('click', function() {
    const getData = $.ajax({
      url: './test.json',
      dataType: 'json',
      cache: false
    });
    getData.then(
      function(data) {
        console.log(data);
      },
      function(error) {
        console.log(error);
        console.log(error.status);
      }
    );
  });
});

通常時は取得したデータをconsoleに出力しますが、ページ読み込み後にオフラインにしてボタンをクリックすると、ステータスコード0が返ってきました。
Ajaxで取得できる場合のデモページ

取得するURLだけ変更して、取得できない(エラーになる)場合も試してみます。

$(function() {
  $('#btn').on('click', function() {
    const getData = $.ajax({
      url: './none.json',
      dataType: 'json',
      cache: false
    });
    getData.then(
      function(data) {
        console.log(data);
      },
      function(error) {
        console.log(error);
        console.log(error.status);
      }
    );
  });
});

この場合はステータスコード404が返ってくることが確認できました。
Ajaxで取得できない場合のデモページ

ステータスコードが0の場合を判別することでオフラインの対応ができないか調べてみたのですが、ステータスコード0は応答が空の場合に発生するようなので、オフライン以外にもありえるようでした。
色々考えてみましたが、そもそもオフライン時はサーバからの返り値が空で判別ができなさそうなので、Ajaxを行う前のタイミングでnavigator.onLineを使ってオフラインか判別するようにしました。

$(function() {
  $('#btn').on('click', function() {
    if (!navigator.onLine) {
      console.log('オフラインです。');
      return;
    }
    const getData = $.ajax({
      url: './test.json',
      dataType: 'json',
      cache: false
    });
    getData.then(
      function(data) {
        console.log(data);
      },
      function(error) {
        console.log(error);
        console.log(error.status);
      }
    );
  });
});

オフラインの場合は別途consoleを出力して、その時点で処理を終了するようにしています。
オフライン時の対応のデモページ