HTML入門 | HTML5 API | Application Cache

Tags:

Application Cache API

application cache APIはWebアプリケーションをキャッシュ(cache)し、インターネット接続なしでユーザーがアクセスできるようにする。
したがってapplication cacheを使用すると、Webアプリケーションのオフライン版を簡単に作成できる。

application cacheを使用する利点は次のとおりである。

  • オフライン接続: ユーザーはWebアプリケーションをオフライン(off-line)でも使用できる。
  • 速度: キャッシュ(cache)されたリソースは高速にロード(load)できる。
  • サーバー負荷の軽減: Webブラウザはサーバーのリソースに変更があった場合だけリソースを更新すればよい。

application cacheをサポートする主要Webブラウザのバージョンは次のとおりである。

API ie chrome firefox safari opera
application cache 10.0 4.0 3.5 4.0 11.5

Cache Manifestファイル

application cacheを使用するには、まずcache manifestファイルを作成する必要がある。
cache manifestファイルは、Webブラウザにキャッシュ(cache)すべきファイルとキャッシュすべきでないファイルを知らせる。

このmanifestファイルは、次の3つのセクション(section)で構成される。

  • CACHE MANIFEST: 最初にダウンロードした後も継続してキャッシュするファイルを記録する。
  • NETWORK: サーバーとの接続が必要なファイルを記録し、これらのファイルは決してキャッシュされない。
  • FALLBACK: ファイルにアクセスできない場合に代替するファイルを記録する。

キャッシュ(cache)の更新

Webブラウザは次のような場合にキャッシュ(cache)情報を更新する。

  • ユーザーがWebブラウザのキャッシュを強制的に削除した場合
  • application cacheがプログラムによって更新された場合
  • cache manifestファイルが修正された場合

構文

CACHE MANIFEST
# 2016-03-22 v1.0.1
test.html
test.css
test.js
 
NETWORK:
test.jpg
 
FALLBACK:
/ offline.html

一度キャッシュされると、サーバー上のファイルを修正しても、Webブラウザはユーザー側にキャッシュされているバージョンのファイルだけを表示する。
したがってサーバー上のファイルを修正した後は、必ずWebブラウザがキャッシュを更新するようにしなければならない。

このとき最もよく使われる方法は、cache manifestファイル内のコメント部分を修正することである。
一般的には更新日やバージョン情報をコメントとして表示し、この部分を修正してWebブラウザにキャッシュ更新を促す。