ホームページ > 記事 > ウェブフロントエンド > HTML 5 アプリケーションのキャッシュ_html/css_WEB-ITnose
HTML 5 アプリケーションのキャッシュ_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-21 09:10:111139ブラウズ
HTML 5 アプリケーション キャッシュの概要
http://www.w3school.com.cn/html5/html_5_app_cache.asp
以下は、実際のケースを通して HTML5 アプリケーション キャッシュについて紹介します。
1 つのアプリケーション サーバー
アプリケーション サーバーは tomcat.
を使用します。ファイル default.appcache
は staticPage.html をキャッシュします。 * つまり、すべてのファイルはキャッシュされません。ページが存在しない場合、またはインターネットに接続できない場合は、errorPage.html
<mime-mapping> <extension>appcache</extension> <mime-type>text/cache-manifest</mime-type> </mime-mapping>
index.html default.appcache キャッシュ ファイルの導入
CACHE MANIFEST staticPage.html NETWORK: * FALLBACK:/ errorPage.html
staticPage.html
<!DOCTYPE html><html manifest="default.appcache"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title></head><body> this is the index page!</body></html>
randomPage.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title></head><body> this is the static page! eee</body></html>
にジャンプしますerrorPage.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title></head><body>This is the random page!</body></html>
上記のすべての HTML ファイルとキャッシュ ファイル (default.appcache) は同じディレクトリにあります。
それでは、テスト結果を見てみましょう
http://localhost:8080/webapp/index.html にアクセスしてください
結果は次のとおりです
コンソール上の情報から、staticPage.html を確認できます。 , errorPage.html すでにキャッシュされています。
サーバーを停止してください
。
http://localhost:8080/webapp/staticPage.html へのアクセスは正常です。キャッシュが有効になります http://localhost:8080/webapp/randomPage.html にアクセスすると、errorPage.html コンテンツが返されます。はい、FALLBACK 設定が有効になります。
http://localhost:8080/webapp/index.html へのアクセスは正常です。このページはキャッシュされるように設定されていないため、これは必要ありません。 w3cshcool の導入により、マニフェストが指定された各ページは、ユーザーがアクセスするとキャッシュされることがわかりました。
上記の問題を解決するには、次の解決策があります。
cachePage.htmlを追加
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title></head><body> <h1>Error !!!</h1></body></html>
index.htmlを修正し、本文に以下を追加します。 うわー
テストした結果、
実現不可能。
要約:
アプリケーションに A、B、C、D ページがある場合。
マニフェスト ファイルは A ページに導入され、マニフェスト ファイルは B ファイルをキャッシュし、C ファイルはエラー ページとして機能します。
ページ A をリクエストすると、ブラウザはページ A、B、C、およびマニフェスト ファイルをキャッシュします。
ページ A、B、C が更新され、ファイルを更新したい場合は、サーバー側のマニフェスト ファイルに変更を加えます (またはサーバー側のマニフェスト ファイルを削除します。その場合、ユーザーが
anyにアクセスしたときに、キャッシュされたページがある場合、ブラウザはマニフェスト ファイルの同期を試行し、ファイルが存在しないことを確認して、すべてのクライアント キャッシュを削除します)。
A、B、C (キャッシュ ページ) にアクセスするたびに、ブラウザはマニフェスト ファイルを同期します。
つまり、キャッシュ ファイルにアクセスするたびに、ブラウザは マニフェスト ファイルを同期し、
マニフェスト ファイルが更新されると、キャッシュ ファイルのリストが更新 (キャッシュ ファイルの更新)、キャッシュ ファイルの削除、キャッシュ ファイルの追加)。
その後、キャッシュファイルに再度アクセスすると、更新された内容が表示されます。
上記はすべて、Chrome バージョン 41.0.2272.118 でテストされています。