ホームページ > ウェブフロントエンド > H5 チュートリアル > HTML5 オフライン キャッシュは Tomcat の下に展開され、写真やフラッシュなどのオフライン閲覧を可能にします。_html5 チュートリアル スキル

HTML5 オフライン キャッシュは Tomcat の下に展開され、写真やフラッシュなどのオフライン閲覧を可能にします。_html5 チュートリアル スキル

WBOY
リリース: 2016-05-16 15:50:40
オリジナル
1809 人が閲覧しました

Web ページを開き、読み込み後にインターネットが突然切断されると、ページを更新するとページが表示されなくなります。
更新した後、新しいウィンドウで別のページを開いて同じ URL を入力すると、インターネットから切断しても同じページが表示されると思ったことはありませんか? 。 HTML5 オフライン アプリケーションはそのような機能を提供します。
ページ内のデータがロードされるときに、いくつかの画像、Flash、CSS、JS、HTML、およびその他のファイルをキャッシュするように設定できます。これらのキャッシュされたファイルは、次回インターネットが利用できないときに使用できます。 HTML5のオフラインアプリケーションです。
実際、実装は非常に簡単です。

サーバーが必要です。ここでは Tomcat サーバーを使用して説明します。
まず、.manifest 接尾辞を持つファイルの鉱山タイプを text/cache-manifest に設定します。
Tomcat の設定というと、馴染みのある友人は自然に web.xml ファイルを思い浮かべるでしょう。次の設定をファイルに追加するだけです:

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


マニフェスト

;mime-type> ;text/cache-manifest


次に、xxx.manifest ファイルを作成します。xxx は自分で選択した名前です。 。このファイルの形式は次のとおりです:
コードをコピーします
コードは次のとおりです:


キャッシュマニフェスト
#version 1.5
キャッシュ:
MyTest.html
CSS/main.css
Javascript/bwH5LS.js
exp-calif-logo.gif


最初の行は必須で、これがマニフェスト構成ファイルであることを示します。
#version 1.5
この文はコメントであり、ブラウザにキャッシュ ファイルを更新してもらいたいだけです。マニフェスト ファイルがオリジナルと同じ場合、ブラウザはキャッシュ ファイルを再ロードしないため、このコメントを使用して、一方ではバージョン番号を変更し、他方ではブラウザにキャッシュを更新させることができます。
CACHE:
この行は、次のファイルがキャッシュされることを示します。この例では、現在のページ MyTest.html のほか、いくつかの CSS ファイル、JS ファイル、および画像がキャッシュされます。
言及されていないキーワードの例がいくつかあります。つまり、
NETWORK:
FALLBACK:
NETWORK は、キャッシュされたくないページを指します。FALLBACK は、要求されたファイルが見つからないか、サーバーを指します。ファイルが利用できない場合の代替手段。たとえば、ネストされたページをリクエストしたいが、このページのサーバーに接続できない場合は、別の指定されたページに移動できます。
これは、 タグにマニフェストの場所を追加するだけです:
簡単なオフライン アプリケーションを実装します。

キャッシュされたファイルはどこにありますか?
Chrome でテストしたところ、独自のメカニズムに従ってこれらのファイルがチャンクに保存されることがわかり、完全なファイルを見つけることができませんでした。保存されたデータは
C:UsersjasonlingAppDataLocalGoogleChromeUser DataDefault にあります。具体的な保存方法がわかりません。
Firefox 上のファイルも独自のメカニズムに従って保存されますが、SQLite で開いた後、作成者はキャッシュされたファイルの特定の情報を見つけました。
興味のある読者は、自分で試して、それが機能するかどうかを確認してください。 . 新しい発見。
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート