CSSチームが運営するHTML5・CSS3情報サイト

HTML5 GOGO

ボーズ・オンラインストア

Deguchi

キャッシュマニフェストとは

HTML5の周辺技術で、以前からブラウザに実装されているブラウザキャッシュよりも、強力なローカルへのキャッシュを制御するAPI(Offline Application Caching APIs)の設定ファイルです。
http://www.w3.org/TR/offline-webapps/#offline

設定してみましょう

まず、キャッシュマニフェストファイルを作ります

CACHE MANIFEST
# #から始まる1行はコメント
# ↑先頭には必ず、「CACHE MANIFEST」

# Version: 2010121701
# ↑Versionはキャッシュの更新のために、設定しておくと楽。

CACHE:
# ↑「CACHE:」以降がローカルにキャッシュする対象
# 「CACHE:」がなくても、同じ意味。

/admin/wp-content/themes/html5gogo/css/common.css
# ↑ファイルを指定する、ワイルドカードは使えない、相対パスでも、絶対パス(httpあり)でもOK

FALLBACK:
# ↑「FALLBACK:」以降は、代替を指定。
# もしかしてあまり使わない?

NETWORK:
# ↑「NETWORK:」以降は、ローカルキャッシュがあっても、通常のHTTPリクエストを行う

ファイル名は「html5gogo.manifest」としました。

次にMIME TYPEの設定

「.manifest」のMIME TYPEをサーバーに設定する必要がありますので
.htaccessに

AddType text/cache-manifest .manifest

と書くか、
mime.typesに

text/cache-manifest manifest

を追加します。

続いて<html>タグにmanifestの指定を追加

<!DOCTYPE html>
<html manifest="/html5gogo.manifest">
<head>
</head>
<body>
</body>
</html>

以上でOK。

設定してみて

HTTPリクエストを減らすには効果的

今でも、HTTPリクエストを減らす為に、キャッシュを強力にする手段はありますが。
その方法だと、ファイル名を厳密に管理して、変更があれば、ファイル名を変えないといけないという若干手間が掛かってしまいます。
しかし、キャッシュマニフェストの場合だと、マニフェストファイルを少し変更して、更新するだけでキャッシュが更新される為、運用も楽になります。

でも仕様がちょっと…

やっぱり楽したいですよね。ワイルドカードか、正規表現が使いたい!
今はキャッシュするファイルを全部書かないといけないので、ブログなどのコンテンツではマニフェストファイルを動的に出力するような仕組みがないと厳しいです。
正規表現はシステマチックに成り過ぎるので、せめてワイルドカードは対応して貰いたいですね。

でも…

どうもFirefox3.6.13で動きが怪しかったので、設定は外しました。
Firefox4だとうまくいくのかな?という感じです。(Firefox4は、手元に無かったので未確認。)
仕様策定中のようなので、もう少し様子を見た方が良さそうです。

Subscribe:
pagetop