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


HTML5を使用すると、cache manifestファイルを作成することで、Webアプリのオフラインバージョンを簡単に作成できます。

注意:manifest技術はWeb標準で廃止されており、この機能の使用は推奨されていません。


アプリケーションキャッシュ(Application Cache)とは?

HTML5はアプリケーションキャッシュを導入しました。これは、Webアプリをキャッシュでき、インターネット接続なしでもアクセスできることを意味します。

アプリケーションキャッシュには、アプリに3つの利点があります:

  1. オフラインブラウジング - ユーザーはアプリがオフラインのときにそれらを使用できます
  2. 速度 - キャッシュされたリソースはより速く読み込まれます
  3. サーバーの負荷軽減 - ブラウザーはサーバーから更新または変更されたリソースのみをダウンロードします。

ブラウザサポート

Internet ExplorerFirefoxOperaGoogle ChromeSafari

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


HTML5 Cache Manifest の例

次の例は、cache manifestを持つHTMLドキュメント(オフラインブラウジング用)を示しています:

例

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

<body>
ドキュメントの内容......
</body>

</html>

試してみる »


Cache Manifest の基本

アプリケーションキャッシュを有効にするには、ドキュメントの<html> タグに manifest 属性を含めます:

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

manifestを指定した各ページは、ユーザーがアクセスしたときにキャッシュされます。manifest属性が指定されていない場合、ページはキャッシュされません(manifestファイル内でそのページが直接指定されている場合を除く)。

manifestファイルの推奨ファイル拡張子は ".appcache" です。

Remarkmanifestファイルには正しいMIMEタイプ、つまり "text/cache-manifest" を設定する必要があることに注意してください。Webサーバーで設定する必要があります。


Manifest ファイル

manifestファイルは、ブラウザーにキャッシュされる内容(およびキャッシュされない内容)を伝える単純なテキストファイルです。

manifestファイルは3つの部分に分けられます:

  • CACHE MANIFEST- この見出しの下にリストされたファイルは、初回ダウンロード後にキャッシュされます
  • NETWORK- この見出しの下にリストされたファイルはサーバーへの接続が必要で、キャッシュされません
  • FALLBACK- この見出しの下にリストされたファイルは、ページにアクセスできない場合のフォールバックページ(404ページなど)を指定します

CACHE MANIFEST

最初の行、CACHE MANIFEST は必須です:

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

上記のmanifestファイルには、CSSファイル、GIF画像、JavaScriptファイルの3つのリソースがリストされています。manifestファイルが読み込まれると、ブラウザーはウェブサイトのルートディレクトリからこれら3つのファイルをダウンロードします。その後、ユーザーがインターネットから切断しても、これらのリソースは引き続き利用可能です。

NETWORK

次のNETWORKセクションでは、ファイル "login.php" が決してキャッシュされず、オフライン時には利用できないことを指定します:

NETWORK:
login.php

アスタリスクを使用して、他のすべてのリソース/ファイルがインターネット接続を必要とすることを示すことができます:

NETWORK:
*

FALLBACK

次のFALLBACKセクションでは、インターネット接続を確立できない場合、/html5/ ディレクトリ内のすべてのファイルの代わりに "offline.html" を使用することを指定します:

FALLBACK:
/html/ /offline.html

注意:最初のURIはリソースで、2番目は代替(フォールバック)です。


キャッシュの更新

アプリがキャッシュされると、以下のいずれかが発生するまでキャッシュされた状態が維持されます:

  • ユーザーがブラウザーのキャッシュをクリアする
  • manifestファイルが変更される(下のヒントを参照)
  • アプリケーションキャッシュをプログラムによって更新する

例 - 完全な Manifest ファイル

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

NETWORK:
login.php

FALLBACK:
/html/ /offline.html

Remarkヒント:"#" で始まる行はコメント行ですが、他の目的にも使用できます。アプリのキャッシュは、manifestファイルが変更されると更新されます。画像を編集したり、JavaScript関数を変更したりしても、これらの変更は再キャッシュされません。コメント行の日付とバージョン番号を更新することは、ブラウザーにファイルを再キャッシュさせる1つの方法です。


アプリケーションキャッシュに関する注意事項

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

ファイルがキャッシュされると、サーバー上のファイルを変更しても、ブラウザーはキャッシュされたバージョンを表示し続けます。ブラウザーがキャッシュを更新するようにするには、manifestファイルを更新する必要があります。

注意:ブラウザーによるキャッシュデータの容量制限は異なる場合があります(一部のブラウザーでは、サイトごとに5MBという制限が設定されています)。

その他の拡張機能