キャッシュ・マニフェスト

キャッシュ・マニフェストとは、ブラウザのキャッシュをコントロールする宣言文。

要点

  • キャッシュ・マニフェストを作ると、ブラウザのキャッシュをコントロールすることができる。
  • キャッシュ・マニフェストは、ファイル転送量を減らしたい場合や、オフラインでも動作するウェブアプリを作る場合などに使う。ファイル転送量を減らすと、表示速度アップやサーバー負荷軽減に効果がある。
  • キャッシュ・マニフェストを記述したファイルの拡張子は、「.appcache」とするように、HTML5は推奨している。
  • キャッシュ・マニフェスト・ファイルのURLを、html要素のmanifest属性に指定する。
  • キャッシュ・マニフェスト・ファイルを更新しなければ、ブラウザでリロード（再読み込み）しても、ブラウザはキャッシュを更新しない。キャッシュ・マニフェスト・ファイルを更新し、ブラウザでリロードすると、ブラウザはキャッシュを更新する。ただし、表示内容の更新は、２回目のリロード時である。

書き方

まず、一行目に、「CACHE MANIFEST」と記述する。

CACHE MANIFEST

二行目には、「#」から始めるコメント文で、作成日やバージョンを記述すると良いだろう。マニフェストでキャッシュさせたファイルを更新した時、マニフェストのコメント文を変更することで、キャッシュ・マニフェスト・ファイルを更新したことになり、ブラウザはキャッシュを更新する。

CACHE MANIFEST
# version1.0.0 - 2014-04-01

次に、キャッシュに関する記述を行う。

キャッシュさせたいファイルを指定するだけであれば、そのファイルのURLを記述するだけでよい。

CACHE MANIFEST
# version1.0.0 - 2014-04-01
sample.html
sample.css
sample.png

キャッシュさせたくないファイルや、読み込めなかった時の代替ファイルなどを指定することもできる。

CACHE: キャッシュさせたいファイルを指定する明示的セクション。
NETWORK: キャッシュさせたくないファイルを指定するセクション。常にオンライン上から読み込ませたいファイル。
FALLBACK: キャッシュ・ファイルが読み込めなかった時の代替ファイルを指定するセクション。 
CACHE MANIFEST
# version1.0.0 - 2014-04-01

CACHE:
sample.html
sample.css
sample.png

NETWORK:
sample.php

FALLBACK:
error.html

拡張子

キャッシュ・マニフェストを記述したファイルの拡張子は、「.appcache」とするように、HTML5は推奨しているので、「キャッシュ・マニフェスト・ファイル名.appcache」で保存。

HTML5

キャッシュ・マニフェスト・ファイルのURLを、html要素のmanifest属性に指定する。

<html manifest="cacheManifestFileName.appcache"></html>

.htaccess

キャッシュ・マニフェスト・ファイルのコンテンツタイプを、サーバーに設定する。

拡張子が「.appcache」であるファイルのMIMEタイプを、「text/cache-manifest」に設定。

AddType text/cache-manifest .appcache

サンプル

HTMLファイル

「sample-cache-manifest.html」ファイルの内容。

<!DOCTYPE html>
<html lang="ja" manifest="sample-cache-manifest.appcache">
	<head>
		<meta charset="UTF-8" />
		<link href="sample-cache-manifest.css" type="text/css" rel="stylesheet" />
	</head>
	<body>
		<h1>サンプル</h1>
		<p>ドキュメントの内容</p>
	</body>
</html>

CSSファイル

「sample-cache-manifest.css」ファイルの内容。

h1 {
    color: #f00;
}
p {
    color: #4800ff;
}

キャッシュ・マニフェスト・ファイル

「sample-cache-manifest.appcache」ファイルの内容。

CACHE MANIFEST
# version1.0.0 - 2014-03-25
sample-cache-manifest.html
sample-cache-manifest.css

.htaccess

AddType text/cache-manifest .appcache

実際の表示

サンプルについて

  • キャッシュ・マニフェスト・ファイルは更新せず、HTMLファイルやCSSファイルだけを更新し、リロード（再読み込み）しても、ブラウザはキャッシュを更新しない。
  • HTMLファイルやCSSファイルだけでなく、キャッシュ・マニフェスト・ファイルも更新し、リロード（再読み込み）すると、ブラウザはキャッシュを更新する。ただし、表示内容の更新は、２回目のリロード時である。