レーサーの時間を記録するPHP/mySQL/JS-JQueryベースのWebサイトを作成してから、サーバーに時刻を返します。サーバーは終了時間をdbに挿入します。ハンディキャップの計算式に基づいて終了位置を計算します。完了した場所を保存してWebページに戻し、画面上で更新されます。 Jquery Ajax呼び出しを使用しているため、ページがまったくリロードされません。 データ接続が良好であれば、すべて正常に動作します。フレークなインターネット接続のWebアプリケーション
データ接続が不良な場合、このページの最初のバージョンでは接続が不良であるというメッセージが表示されます。 これを少しスマートにしようとしているので、ブラウザがオンかオフラインかを知らせるHTML5機能を使い始めました。（これはまだまだ良い方法ではないかもしれませんが、コンセプトテストのために機能します） 新しい終了時刻が記録され（または更新され）、オフラインになります。JSは終了時刻のタグにnotSentのクラスを追加するだけです。終了地点と通常終了地点はすべて、データがもはや有効ではないことを示すグレー表示されています（サーバーと通信できるようになるまで）。
ブラウザがオンラインに戻ると、各notSentクラスの単純なjQueryループがAJAXリクエストの再送信を開始し、すべて完了すると戻り終了場所情報を処理し、最新のものとして表示します。
また、ブラウザがオフラインのときにページ上のすべての外部リンクを無効にします。これにより、ユーザは、ページが見つからないボタンを与えるリンクをクリックすることによって、偶然にもデータ入力ページを失うことがない。
私の最後の問題は、ブラウザのリロードとクローズボタンです。ユーザーがオフラインのときにこれらをクリックすると、データ入力画面が失われ、接続が復活するまで不運になります。 これらの機能を無効にすることはできますか？これを簡単にスタックオーバーフローで検索することができますが、ほとんどの回答は古いものを返します。「あなたは本当にすべきではなく、あなたのデザインを考え直す必要があると思っています。警告。
私のデザインを考え直すと、私は学習を始めます。
- HTML 5のローカルストレージブラウザで再読み込みので、もしページのキャッシュを制御するためのマニフェスト
- のApp-キャッシュを（私のデータが入力ボックスに、既に保存されているので、私は、それを必要としない決定）キャッシュされたバージョンを取得する場合はオフラインにします。多くの読書の結果、これは静的なページでは動作するが、データが常に更新される場所ではないという結論に達した。そして、大部分のブラウザはこれをとにかく非難しています。
- サービスワーカーは、オフラインキャッシュを制御する可能性があると思われますが、すべてのブラウザでサポートされているわけではありません。
私は、ブラウザの再読み込みを防ぎ、学習サービスワーカーを延期して、私のような動的コンテンツページのサポートとより良い例が得られるまで頑張っています。
ボトムライン - 何かが欠けていますか？簡単な解決法はありますか？