しばやん雑記

Azure とメイドさんが大好きなフリーランスのプログラマーのブログ

HTML5 オフラインキャッシュを使ってみた

IIS HTML5

とあるアプリの開発で HTML5 のオフラインキャッシュを使ってみたので、ちょっと使い方を ASP.NET 的な視点で書いておきます。

キャッシュマニフェスト

オフライン用にキャッシュしたいファイルを定義するファイルで、実体は非常に簡単なテキストファイルになります。

CACHE MANIFEST

#キャッシュする
CACHE:

# 相対パスも OK
index.html
images/title.jpg

# 外部の URL も OK
http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.1.min.js

#キャッシュしない
NETWORK:

api/scenario.json

こいつは Content-Type を text/cache-manifest にしないとブラウザが認識してくれないのですが、IIS の場合は .htaccess で定義できないので Web.config に書きます。

IIS 7.0 から system.webServer というセクションが追加されました。その中の staticContent 要素に mimeMap 要素を追加することで .htaccess で AddType を定義したのと同じことになります。

<?xml version="1.0"?>
<configuration>
  <system.webServer>
    <staticContent>
      <remove fileExtension=".manifest" />
      <mimeMap fileExtension=".manifest" mimeType="text/cache-manifest" />
    </staticContent>
  </system.webServer>
</configuration>

remove を先に定義しているのは、既に manifest という拡張子が定義されているからです。IIS だからこその設定という感じです。

キャッシュマニフェストを使う

作成したキャッシュマニフェストですが、有効にしたい HTML の html タグに manifest 属性を追加する必要があります。

オフラインキャッシュは DOCTYPE が HTML5 じゃないと動かないらしいです。

<!DOCTYPE html>
<html manifest="cache.manifest">
...
</html>

これでオフラインキャッシュが有効になります。ちなみにオフラインキャッシュは通常のブラウザキャッシュとは異なり、リロードとかでは消えないのでデバッグ中には注意してください。