14

HTML5 オフライン アプリケーションをテストしています。そのために、ローカル Web サーバー (IIS) を停止してアプリケーションを開きます。正常にロードされましたが、サーバー側の API メソッドを要求するとすぐに失敗しました。

それを防ぎたいのですが、 $.get('/api/method') の代わりにローカル ストレージからデータを読み取ります。しかし、自分のアプリケーションがオフラインであることを理解するための機能を見つけることができます。

if (/* online */) {
  // fire ajax
} else {
  // ask localstorage
}

使用しようとしましnavigation.onLineたが、常に正しいようです (少なくとも Chrome では確認できます)。

何か提案はありますか？

編集：現在の回答を考慮して。アプリケーションは、cache.manifest に従ってリソースを使用するため、オフラインであることを明確に理解しています。クライアントがあらゆる種類のトリックやpingを実行する必要があるというのは、私にはばかげています。現在のモードを確認する簡単な方法があるはずです。

4

7 に答える 7

14

確認する簡単な方法の 1 つは、次のようにマニフェストにフォールバック セクションを追加することです。

FALLBACK
/online.js /offline.js

次にonline.js、グローバル変数を true に設定し、それを false に設定して、ネットワーキングを計画し、コールバックで条件付きで必要な処理を実行する予定があるときはいつでも、Ajax によってoffline.js要求するだけです。online.jsそれまでの間、すべてのアプリ データ クライアント側を維持します。

別のアプローチは、 Remy Sharp によって提案されているブロッキング ポリフィルですnavigator.onLine。

于 2012-03-20T12:18:07.380 に答える
3

オンライン状態はHEAD、タイムアウト付きのajaxリクエストを実行してチェックすることもできます。タイムアウトに達すると（または呼び出しがエラーステータスを返すと）、オフラインで作業している（ネットワーク機能がない）と見なすことができ、代わりにローカルストレージを使用する必要があります

実際、状態の一貫性を保つために、localstorageは、オフラインのときだけでなく、オンラインで特定のajaxリソースが一時的に利用できない場合（サイトの過負荷など）のフォールバックとして使用する必要があります。もちろん、リソースが再び使用可能になるまで、定期的（または増分）タイムアウトでそのリソースへの継続的なポーリングを行う必要があります。

于 2012-03-20T11:38:33.643 に答える
1

私は同じ機能を必要としていましたが、多くの検索の結果、この機能が見つかりました:

http://louisremi.com/2011/04/22/navigator-online-alternative-serverreachable/

リンクがダウンした場合に備えて、記事のコードを次に示します。

function serverReachable() {
  // IE vs. standard XHR creation
  var x = new ( window.ActiveXObject || XMLHttpRequest )( "Microsoft.XMLHTTP" ),
     s;
  x.open(
      // requesting the headers is faster, and just enough
      "HEAD",
      // append a random string to the current hostname,
      // to make sure we're not hitting the cache
      window.location.href.split("?")[0] + "?" + Math.random(),
      // make a synchronous request
      false
  );
  try {
      x.send();
      s = x.status;
      // Make sure the server is reachable
      return ( s >= 200 && s < 300 || s === 304 );
  } 
  // catch network & other problems
  catch (e) {
     return false;
  }
}

上記のコードには、コメントの下部に投稿されている localhost を操作するための Scott Jehl による修正が含まれていることに注意してください。そして、これは同じ関数の jQuery バージョンへのリンクです。

https://gist.github.com/scottjehl/947084

そして、そのリンクからのコード:

function serverReachable() {
    var s = $.ajax({
           type: "HEAD",
           url: window.location.href.split("?")[0] + "?" + Math.random(),
           async: false
       }).status;
    return s >= 200 && s < 300 || s === 304;
};

私はこのテクニックが本当に効果的であることを発見しました。リクエストはヘッダー情報のみを対象としているため、かなり高速で、すべてのブラウザで機能します。大成功！:)

私と同じように、他の人もこれが役立つことを願っています。:)

于 2014-06-24T08:24:05.523 に答える
0

エラーハンドリングをしてみてはいかがでしょうか。Try Catch ループのように。

 try {
    //Run some code here
    }
 catch(err) {
    //Handle errors here
    }
于 2012-03-20T11:34:18.263 に答える
0

ajax呼び出しが特定のエラー(操作タイムアウト)で失敗したときにlocalstorageに尋ねるオプションはありますか?

または、ページが (少なくとも部分的に) サーバー スクリプトで生成されるため、サーバー側スクリプトを使用してページにリクエスト タイムスタンプ (または一意の ID) を含め、ローカル ストレージに配置できます。次に、保存された ID とレンダリングされた ID を照合することで、ページがキャッシュから読み込まれたかどうかを確認できます。

于 2012-03-20T11:53:10.343 に答える
0

最良のオプションerrorは、jQuery$.get()関数のイベントを使用して、Web サーバーではなく localStorage をクエリすることです。これには、サーバーが到達不能になった場合や、ユーザーのインターネット全体が到達不能になった場合にフォールバックできるという利点があります。

$.get({
  success: //deal with postback from ajax call,
  error: //Whoops no access to server deal with it in a local way
})
于 2012-03-20T12:10:15.250 に答える