3

アプリケーション キャッシュを使用して、Web サイトもオフラインで動作するようにしています。
私のマニフェストは次のようになり、次を使用して埋め込まれます<iframe>。

CACHE:
favicon.ico
assets/css/style.css
assets/js/libs/zepto.js
assets/js/app.js

NETWORK:
*

FALLBACK:
/ offline.html

インターネット接続を切断すると、期待どおりに動作します->すべてがoffline.htmlページを介して提供されます。
しかし、たった今、すべての 404 (サーバー上に存在しなかった URL など) も、offline.html を表示するマニフェストの FALLBACK セクションを使用していることがわかりました。

オフラインであること (この場合、offline.html が正しい選択です) とサーバーが 404 を返すこと (この場合、404 エラーを表示したいだけです) を区別する方法はありますか?

4

2 に答える 2

6

元のリクエストが...

...別のオリジン (キャプティブ ポータルを示す)、または 4xx または 5xx ステータス コードまたは同等のリソースへのリダイレクト、またはネットワーク エラーが発生した場合

( http://www.whatwg.org/specs/web-apps/current-work/multipage/offline.html#changesToNetworkingModelから)

残念ながら、フォールバックが発生した場合、その理由を調べる理由はありません。500、404、リダイレクト、または接続の失敗を区別することはできません。

ハックの回避策は次のとおりです。

FALLBACK:
/connection-test.js connection-failed.js
/ offline.html

offline.html ページに connection-test.js を埋め込むことができます。connection-test.js の読み込みはユーザーが接続していることを示し、connection-failed.js は接続がないことを示します。

于 2012-12-13T13:03:26.060 に答える
3

この同じ問題の解決策を探しているときに、あなたの投稿に出会いました。

私が最終的に行ったことは、フォールバック ページ (あなたの場合は offline.html) で navigator.onLine の値をチェックすることでした。navigator.onLine が true の場合、ユーザーはオンライン/インターネットに接続されていると考えられ (警告が適用されます)、要求したファイルが見つからなかったため、フォールバック ページに送信されました。そこで、ページのコンテンツを 404 のコンテンツに変更します。

例：

<script>

header=document.getElementById('header');
error_message=document.getElementById('error_message');

if(navigator.onLine){
    header.innerHTML='Page not found';
    error_message.innerHTML='The page you requested could not be found.  Please check the URL and try again.';
}

</script>

アプリケーション キャッシュの仕様に、40x と 50x を処理する別の方法が含まれていれば、確かに素晴らしいことです。この解決策は確かに理想的ではありませんが、私が思いついた最善の解決策です。

お役に立てば幸いです。

于 2014-10-03T01:30:57.507 に答える