ホームページ  >  記事  >  ウェブフロントエンド  >  HTML 5 アプリケーションのキャッシュ_html/css_WEB-ITnose

HTML 5 アプリケーションのキャッシュ_html/css_WEB-ITnose

WBOY
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 でテストされています。



声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。