HTML5 アプリケーション キャッシュ

HTML5 ウェブストレージ HTML Web Workers

アプリケーション キャッシュを使用すると、キャッシュ マニフェスト ファイルを作成することで、Web アプリケーションのオフライン バージョンを簡単に作成できます。

アプリケーション キャッシュとは何ですか?

HTML5 ではアプリケーション キャッシュ (アプリケーション キャッシュ) が導入されました。これは、インターネット接続がない場合でも Web アプリケーションをキャッシュしてアクセスできることを意味します。

アプリケーション キャッシュは、アプリケーションに 3 つの利点をもたらします。

  1. オフライン ブラウジング - ユーザーはオフラインでもアプリを使用できます
  2. 速度 - キャッシュされたリソースの読み込みが速くなります
  3. サーバー負荷の軽減 - ブラウザは更新または変更されたリソースのみをサーバーからダウンロードします

ブラウザのサポート

表内の数字は、アプリケーション キャッシュを完全にサポートする最初のブラウザのバージョンを示します。

API          
Application Cache 4.0 10.0 3.5 4.0 11.5

Cache Manifest 基础

アプリケーション キャッシュを有効にするには、ドキュメントの <html> タグにマニフェスト属性を含めます。

<!DOCTYPE HTML>
<html manifest="demo.appcache">
...
</html>

manifestt を指定するすべてのページは、ユーザーがアクセスするとキャッシュされます。 マニフェスト属性が指定されていない場合、ページはキャッシュされません (マニフェスト ファイルで直接指定されていない限り)。

manifestst ファイルの推奨ファイル拡張子は「.appcache」です。

注:manifestst ファイルでは、正しい MIME-type、つまり「text/cache-manifest」を設定する必要があります。 Web サーバー上で設定する必要があります。

Manifest ファイル

manifest ファイルは、何をキャッシュするか (何をキャッシュしないか) をブラウザに指示する単純なテキスト ファイルです。

manifest ファイルには 3 つのセクションがあります:

  • CACHE MANIFEST - この見出しの下にリストされているファイルは、最初のダウンロード後にキャッシュされます
  • NETWORK - この見出しの下にリストされているファイルはサーバーへの接続が必要なため、キャッシュされません
  • FALLBACK - この見出しの下にリストされているファイルは、ページがアクセス不能になった場合のフォールバック ページ (404 ページなど) を指定します

CACHE MANIFEST

最初の行 CACHE MANIFEST は必須です。

CACHE MANIFEST
/theme.css
/logo.gif
/main.js

上記のmanifeststファイルには、CSSファイル、GIF画像、JavaScriptファイルの3つのリソースがリストされています。 Manifestst ファイルがロードされると、ブラウザはこれら 3 つのファイルを Web サイトのルート ディレクトリからダウンロードします。 これらのリソースは、ユーザーがインターネットから切断するたびに利用可能な状態になります。

NETWORK

以下の NETWORK セクションでは、ファイル「login.php」がキャッシュされず、オフラインでは使用できないことを指定しています。

NETWORK:
login.asp

アスタリスクは、他のすべてのリソース/ファイルにインターネット接続が必要であることを示すために使用できます。

NETWORK:
*

FALLBACK

以下の FALLBACK セクションでは、インターネット接続が確立できない場合、/html/ ディレクトリ内のすべてのファイルが「offline.html」に置き換えられることを指定しています。

FALLBACK:
/html/ /offline.html

注: 最初の URI はリソースで、2 番目の URI はフォールバックです。

キャッシュを更新

アプリケーションがキャッシュされると、次のいずれかが発生するまでキャッシュされたままになります。

  • ユーザーがブラウザのキャッシュをクリアする
  • マニフェスト ファイルが変更されました (以下の注を参照)
  • プログラムによるアプリケーション キャッシュの更新

例 - 完全な Cache Manifest ファイル

CACHE MANIFEST
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js

NETWORK:
login.asp

FALLBACK:
/html/ /offline.html

ヒント:「#」で始まる行はコメント行ですが、他の目的にも使用できます。 アプリケーションのキャッシュは、マニフェスト ファイルが変更された場合にのみ更新されます。 画像を編集したり、JavaScript 関数を変更したりしても、それらの変更は再キャッシュされません。 コメント行の日付とバージョン番号を更新することは、ブラウザにファイルを再キャッシュさせる 1 つの方法です。

アプリケーションのキャッシュに関する注意

キャッシュされたコンテンツには注意してください。

ファイルがキャッシュされると、サーバー上のファイルを変更しても、ブラウザにはキャッシュされたバージョンが表示され続けます。 ブラウザーがキャッシュを確実に更新するには、マニフェスト ファイルを更新する必要があります。

注: ブラウザによっては、キャッシュ データに対する制限が異なる場合があります (ブラウザによっては、サイトあたり 5MB の制限がある場合があります)。