HTML5 ガイド-6. オフライン アクセス用のオフライン Web アプリケーションの作成方法_html5 チュートリアルのヒント

今日の内容は、オフライン Web アプリケーションの作成方法に関するものです。その利点は、ブラウザーが指定された Web リソースをダウンロードできるため、ユーザーはオフラインでも通常どおりサイトを使用できることです。

1. マニフェストを定義します

マニフェストを使用して、オフラインでアクセスする必要があるリソースをリストします。マニフェスト自体はテキスト ファイルであることが多く、その後に必要なリソースが 1 行に 1 つずつリストされます。ファイルには固定の命名規則はなく、接尾辞の要件もありません。唯一の要件は、接尾辞が text/cache-manifest の MIME タイプを使用してサーバー側で定義されている必要があることです。

iis 7 サーバーの場合は、以下の手順に従います :

1. たとえば、サフィックスが .appcache の場合、iis7 を開いてルート ノードを選択します (この方法では、すべてのサイトが構成を継承することになります。または、単一のサイトに対して構成することもできます)。

2. 右側の MIME タイプをダブルクリックします。

3. 右クリックして MIME タイプを追加し、設定を完了します。

サーバーが構成され、マニフェスト ファイルが追加されました。

コードをコピーしますコードは次のとおりです:

キャッシュ マニフェスト

manifestFile .html
img/1.jpg
img/2.jpg
img/3.jpg

次に、以下の例を見てみましょう。

コードをコピーコードは次のとおりです。

< ;img alt="" id="imgtarget" src="img/1.jpg" />

car1 car2
car3

< script>
var button = document.getElementsByTagName('button');
for (var i = 0; i button[i].onclick = handleButtonPress;
}
function handleButtonPress(e) {
document.getElementById('imgtarget').src = 'img/' e.target.id '.jpg';
}

プログラムの実行中、ブラウザーによっては、オフライン データをローカルに保存することを許可するかどうかを尋ねるブラウザーと、そうでないブラウザーがあります。このような簡単なオフラインアプリケーションが作成されます。

2. 疑問に対する答え

この部分の知識を学ぶときに、次のようないくつかの問題や疑問にも遭遇しました。

1. vs2010 を直接実行すると (開発環境で) オフライン アプリケーションが正しく実行できないのはなぜですか?

2. オフライン アプリケーションが正常に作成されたかどうかを確認するにはどうすればよいですか?

3. 現在のアプリケーションがオフラインかどうかを確認するにはどうすればよいですか?

4. iis サービスを一時停止した後、ページを更新すると 404 エラーが報告されるのはなぜですか?

ここで、私が遭遇したこれらの質問に答えます。

2.1. まず最初の質問について説明します。この問題に関して重要なのは、アプリケーションの Web 構成項目がどのように構成されているかです。vs 開発サーバーを使用している場合、そのサーバーに MIME タイプを設定する方法がないため、この場合、オフライン アプリケーションはこの方法を使用しません。が使用されます。残りの 2 つの Web 構成方法については、上で紹介した MIME タイプの構成方法に従って iis サーバーを正しく構成していれば、オフライン アプリケーションは正しく実行されます。

2.2. ここでは、Chrome ブラウザのデバッグ ツールを使用する必要があります。Chrome ブラウザを使用して Web プログラムを開き、[リソース] タブに切り替えます。設定した情報がアプリケーション キャッシュに存在し、キャッシュされたファイルが見つかる限り、オフライン アプリケーションが正常に作成されたことが証明されます。

2.3. まだ Chrome のデバッグ ツールを使用しており、[リソース] タブに赤い円が表示されていないことに注目してください。オンラインはオンラインを意味します。

ネットワークケーブルを抜くと「オフライン」と表示され、オフラインであることを示します。このとき、オフラインアプリケーションの効果を表示できます。

2.4. 最後の質問に関しては、引き続き Chrome ブラウザのデバッグ ツールを使用する必要があります。iis サービスを一時停止すると、[リソース] タブの表示はまだオンラインですが、後で表示が変わります。アイドルから時代遅れまで。これは、ローカル IIS が一時停止され、オフライン アプリケーションのオフライン効果が表示されない理由も説明します。

これでこのセクションは終わりです。