アプリケーションキャッシュ manifest.appcache

/ HTML5/CSS3/jQuery / Comment[0]

アプリケーションキャッシュとはWebアプリケーションをローカルにキャッシュさせておくことで、オフライン時もURLを入力するとアクセスが可能になるという仕組みでHTML5で導入されました。

キャッシュの更新はマニフェストファイルと呼ばれる構成ファイルの情報を読み取ることにより制御されます。
マニフェストファイルはテキスト形式のファイルで、キャッシュするファイル名が列挙されています。

以下がマニフェストファイルの例です。ファイル名は*.appcacheと付けるのが一般的です。
例：manifest.appcache

キャッシュを更新する際は、マニフェストファイルのTimestampを更新時間に書き換えます。

マニフェストファイルの書式

以下がマニフェストファイルの例です。

CACHE MANIFEST

# Timestamp: 201410290000

CACHE:
  app.html
  style.css
  js.js

SETTINGS:
  prefer-online

NETWORK:
  *

マニフェストファイルの記述ルール

  • １行目にCACHE MANIFESTを記述する
  • セクションを開始するにはセクション名の末尾にコロンをつけて改行する。
  • セクションの範囲は次のセクションが始まるまで
  • 同じセクションが何回も登場しても良い
  • セクションには以下の4つがある
    • CACHE
    • FALLBACK
    • NETWORK
    • SETTINGS
CACHE

このセクションに記述されたファイルはキャッシュされます。また、セクションを指定しない場合は暗黙的にCACHEセクションとなります。

FALLBACK

アクセスできなかった場合に代用のリソースを指定します。

FALLBACK:
/home example.html

上記例では/homeで始まるURLはアクセスできなかった場合にexample.htmlを表示するという意味になります。

NETWORK

このセクションに書かれたリソースはキャッシュを参照せず、サーバから取得します。（ブラウザ自体のパフォーマンス向上目的のキャッシュは有効）

NETWORK:
/api/

上記例では/api以下のリクエストは必ずサーバへ飛ばすようになります。

*を指定した場合は、マニフェストファイルに書かれていないリソースはネットワークから取得されるようになります。

SETTINGS

アプリケーションキャッシュの設定を行う項目ですが、現在はprefer-onlineのみ指定可能です。

SETTINGS:
prefer-online

prefer-onlineを指定するとアプリケーションキャッシュはオフライン時のみ利用されるようになりオンライン時はネットワークからリソースを取得するようになります。

マニフェストファイルの適用

マニフェストファイルを適用させるには、サーバとhtmlを少しいじる必要が有ります。
apacheに次のMIMEを追加します。「text/cache-manifest manifest」
そして、html要素に下記のようにmanifest属性を追加することでマニフェストファイルが適用されるようになります。

<!DOCTYPE html>
<html manifest="manifest.appcache">
:
関連記事

コメント

:
:
:
:
:
管理人のみ表示を許可

↑