HTML5的にmanifestファイルをゴニョった
Posted: Updated:
とりあえず自サイトのために
本当はもっと深遠な用途があるんでしょうけれども、jQuery系のデカいけど滅多に変更がないファイルをどうにかするためにHTML5のアプリケーションキャッシュを試してみました。（という建前）
Javascriptとかでガシガシやるような、エンジニア系の風情はありません。なるべくチョロい感じで。
manifestファイルをつくるよ
ともかく、HTML要素の属性としてmanifestファイルを指定しないと始まらないので、以下のような内容のファイルを用意しました。
CACHE MANIFEST
# Revision: 20100201-2300
############################################################
## キャッシュ対象のコンテンツ
CACHE:
themes/havelog/syntax/scripts/shCore.js
themes/havelog/syntax/scripts/shBrushPhp.js
themes/havelog/syntax/scripts/shBrushXml.js
themes/havelog/syntax/styles/shCore.css
themes/havelog/syntax/styles/shThemeDefault.css
js/jquery/jquery.js
js/jquery/jquery.cookie.js
js/jquery/ui/jquery.ui.js
themes/havelog/images/twitter_16.png
themes/havelog/images/facebook_16.png
themes/havelog/images/flickr_16.png
themes/havelog/images/tumblr_16.png
themes/havelog/images/lastfm_16.png
themes/havelog/images/rss_16.png
############################################################
## 必ずサーバーを見るコンテンツ
NETWORK:
# 大雑把にルートの諸々
/index.php
/index.js
/favicon.ico
/archives
/themes
/js
# 外部リソース
http://www.google-analytics.com
http://b.hatena.ne.jp
http://farm3.static.flickr.com
これを拡張子 .manifestとして任意の場所に置いて、HTML要素のmanifest属性としてパスを通します。
<html lang="ja" manifest="havelog.manifest">
Content-Typeも大事
.htaccessなどで下記のような記述を加えます。htpd.confとかでもモチロンOKです。.manifestがContent-Type: text/cache-manifestでヘッダー送出されるようにします。Content-Typeがちゃんと付与されないと、ブラウザに認識してもらえないようです。
AddType text/cache-manifest .manifest
読み飛ばしてOK@ a-blog cmsの場合は、アクセスの仕方によってはシステムが仲介するので、システム側にもContent-Typeを定義してあげます。private/mime.typesに以下の記述を追加します。
text/cache-manifest manifest
これがこうなる
BEFORE
AFTER
かなり見づらいスクリーンショットになってしまいましたが、キャッシュしたファイルの読み込み時間が、100msから0msに短縮されています。オフラインに保存してるので当たり前ですね。:-D AFTERのほうで長い帯が伸びているのは、google analyticsのファイルです。さすがにキャッシュ対象外にしてあるので。
当たり前ですが結構な効果です。ブログのように、更新があって始めてアクセスされるようなサイトにとっては効果がやや薄そうですが、一般サイトにうまく使うことができれば、高い効果がありそう。
結構長くなってしまったので、ちょい改めてハマったポイントとかについて記録します。次エントリーに続きます。
