HTML5アプリケーションキャッシュ

前：HTML5のWebストレージ

次へ：HTML5のWebワーカー

HTML5を使用して、キャッシュマニフェストファイルを作成することによって、あなたは簡単にWebアプリケーションのオフラインバージョンを作成することができます。

アプリケーションキャッシュ（アプリケーションキャッシュ）とは何ですか？

HTML5はWebアプリケーションがキャッシュすることができ、インターネットに接続せずにアクセスできることを意味し、アプリケーションキャッシュを紹介します。

アプリケーション・キャッシュ・アプリケーションは、3つの利点をもたらします。

オフラインブラウジング - ユーザがアプリケーションをオフラインでそれらを使用することができます
スピード - キャッシュされたリソースは、より速くロード
サーバーの負荷を削減 - ブラウザはサーバから更新または変更されたリソースをダウンロードします。

ブラウザのサポート

Internet Explorerの10は、Firefoxの、クロム、SafariやOperaはアプリケーションキャッシュをサポートしています。

HTML5キャッシュマニフェストの例

次の例は、（オフライン表示用）キャッシュマニフェストでHTMLドキュメントを示しています。

例

<!DOCTYPE HTML>
<html manifest="demo .appcache ">

<body>
文档内容......
</body>

</html>

»をお試しください

キャッシュマニフェストの基礎

アプリケーションキャッシュを有効にするには、ラベルは文書<HTML>でのマニフェスト属性が含まれています。

<!DOCTYPE HTML>
<html manifest="demo .appcache ">
...
</html>

ユーザーが自分のキャッシュされますアクセスするときに、それぞれ指定されたページを発揮します。マニフェスト属性が指定されていない場合（直接マニフェストファイル内のページを指定しない限り）、ページがキャッシュされません。

推奨マニフェストファイル拡張子：「。Appcache」。

注意してください、マニフェストファイルが正しいMIME型、すなわち「テキスト/キャッシュ・マニフェスト」を設定する必要があります。あなたは、Webサーバー上で設定する必要があります。

マニフェストファイル

マニフェストファイルは、キャッシュのブラウザの内容を伝えます（とコンテンツをキャッシュしません）単純なテキストファイルです。

マニフェストファイルは、3つの部分に分けることができます。

CACHE MANIFEST -この文書の見出しの最初のダウンロード後にキャッシュされます
NETWORK -このタイトルでは以下のドキュメントがサーバーに接続する必要があり、キャッシュされません
FALLBACK -この中でページにアクセスできないときに文書がページ（例えばページ404）をロールバックする見出しの下にリストされています

CACHE MANIFEST

最初の行、CACHE MANIFESTは、必要とされています。

CACHE MANIFEST
/theme.css
/logo.gif
/main.js

CSSファイル、GIF画像、およびJavaScriptファイル：上記のマニフェストファイルには、3つのリソースが一覧表示されます。マニフェストファイルがロードされると、ブラウザはサイトのルートディレクトリから3つのファイルをダウンロードします。ユーザーがインターネットから切断するたびに続いて、これらのリソースは引き続き使用可能です。

NETWORK

サブセクションのネットワークファイルの以下の規定は、「login.php "キャッシュされませんし、オフラインで利用可能では使用できません。

NETWORK:
login.php

あなたは/ファイルがインターネット接続を必要とする他のすべての他のリソースを示すためにアスタリスクを使用することができます。

NETWORK:
*

FALLBACK

すべてのファイルの代替/ HTML5 /ディレクトリ "offline.html」で、あなたがインターネット接続を確立できない場合は以下に定義されたフォールバックセクション：

FALLBACK:
/html/ /offline.html

注：最初のURIはリソースである、第二は、代替です。

キャッシュの更新

アプリケーションがキャッシュされると、次が発生するまで、それがキャッシュされたままになります：

ユーザーは、ブラウザのキャッシュをクリア
マニフェストファイルが変更された（以下のヒントを参照してください）
アプリケーションキャッシュを更新するためのプログラムによる

例 - マニフェストファイルを完了

CACHE MANIFEST
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js

NETWORK:
login.php

FALLBACK:
/html/ /offline.html

ヒント：コメント行の先頭に「＃」が、また、他の目的を満たすために。ときに、そのマニフェストファイルの変更キャッシングアプリケーションが更新されます。あなたが絵を編集、またはJavaScript関数を変更した場合、これらの変更は、再キャッシュされません。更新コメント行は、再キャッシュファイルのアプローチにブラウザの日付とバージョン番号です。

アプリケーションキャッシュ命令について

キャッシュの内容に注意してください。

ファイルがキャッシュされたら、ブラウザを使用すると、サーバー上のファイルを編集している場合でも、キャッシュされたバージョンを表示し続けます。必ずお使いのブラウザがキャッシュを更新するようにするには、マニフェストファイルを更新する必要があります。

注：キャッシュされたデータのためのブラウザの容量制限は同じではありません（いくつかの制限のブラウザの設定、各サイトの5メガバイトです）。