English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

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

HTMLを使用して5、キャッシュ マニフェストファイルを作成することで、ウェブアプリケーションのオフラインバージョンを作成しやすくなります。アプリケーションキャッシュを導入することで、ウェブアプリケーションはクライアント側でキャッシュされ、ネットワーク接続がない場合でもオフラインアクセスが可能になります。

アプリケーションキャッシュ(Application Cache)とは何ですか

HTML5 アプリケーションキャッシュメカニズムを提供し、ウェブアプリケーションがオフラインで実行できるようにします。開発者はApplication Cache (AppCache) インターフェースを使用して、ブラウザがキャッシュすべきリソースを設定し、オフラインユーザーに利用可能にします。オフライン状態であれば、ユーザーがリフレッシュボタンをクリックしても、アプリケーションは正常に読み込まれ、動作します。

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

  • オフラインブラウジング - ユーザーはアプリケーションがオフラインのときにそれらを使用できます

  • 速度 - キャッシュされたリソースはより速く読み込まれます

  • サーバーロードの軽減 - ブラウザは、更新されたり変更されたりしたリソースのみをサーバーからダウンロードします。

どのブラウザがサポートしていますか

Internet Explorer 10, Firefox、Chrome、Safari、Operaはアプリケーションキャッシュをサポートしています。

HTML5  キャッシュ マニフェスト例

以下の例は、キャッシュ マニフェストを持つHTMLドキュメント(オフラインで閲覧用)を示しています:

オンラインサンプル

<!DOCTYPE HTML>
<html manifest="demo.appcache">
	<body>
	ドキュメントの内容......
	</body>
	</html>
テストを見てみましょう ‹/›

Cache Manifest 基礎

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

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

manifestを指定したすべてのページは、ユーザーがアクセスしたときにキャッシュされます。manifest属性が指定されていない場合、ページはキャッシュされません(manifestファイルで直接指定されていない場合を除きます)。

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

manifestファイルは正しいMIMEを設定する必要がありますので、ご注意ください。-type、つまり「text」/cache-manifest"。ウェブサーバー上で設定する必要があります。

Manifestファイル

manifestファイルはシンプルなテキストファイルで、ブラウザにキャッシュされる内容(およびキャッシュされない内容)を教えます。

manifestファイルは3つの部分に分けられます:

  • CACHE MANIFEST - この見出しの下に記載されたファイルは、初めてダウンロードされた後、キャッシュされます

  • NETWORK - この見出しの下に記載されたファイルは、サーバーとの接続が必要で、キャッシュされません

  • FALLBACK - この見出しの下に記載されたファイルは、ページがアクセスできない場合のリカバリーページ(例えば 404 ページ)

CACHE MANIFEST

最初の行、CACHE MANIFEST、必須です:

CACHE MANIFEST
/style.css
/logo.png
/main.js

上記のmanifestファイルには3つのリソースが含まれています:CSSファイル、GIF画像、JavaScriptファイルです。manifestファイルが読み込まれた後、ブラウザはウェブサイトのルートディレクトリからこれらのファイルをダウンロードします。それから、ユーザーがいつでもネットワークと接続が切れると、これらのリソースも利用できます。

NETWORK

以下のNETWORKセクションでは、ファイル「login.php」が常にキャッシュされず、オフライン時には使用できないように指定されています:

NETWORK:
login.php

すべての他のリソースを指すために星号を使用できます/ファイルはすべてネットワーク接続が必要です:

NETWORK:
*FALLBACK

以下のFALLBACKセクションでは、ネットワーク接続が確立できない場合に「offline.html」を使用して代替します /html5/ ディレクトリ内のすべてのファイル:

FALLBACK:
/html/ /index.html

注意: 第一个 URI はリソース、二つ目は代替です。

キャッシュの更新

アプリケーションがキャッシュされると、以下のいずれかの状況が発生するまでキャッシュを保持します:

  • ユーザーがブラウザのキャッシュをクリアします

  • manifestファイルが変更されました(以下のヒントを参照してください)

  • アプリケーションキャッシュの更新をプログラムで行います

完全なManifestファイルの例

CACHE MANIFEST
# 2018-02-21 v1.1.1
/style.css
/logo.png
/main.js
NETWORK:
login.php
FALLBACK:
/html/ /index.html
ヒント:「#」で始まるのはコメント行ですが、他の用途にも使用できます。アプリケーションのキャッシュはmanifestファイルが変更された際に更新されます。画像を編集したり、JavaScript関数を修正した場合、これらの変更は再キャッシュされません。コメント行の日付とバージョン番号を更新することで、ブラウザがファイルを再キャッシュする方法の1つです。

アプリケーションキャッシュに関する説明

キャッシュの内容に注意してください。

ファイルがキャッシュされると、ブラウザはサーバー上のファイルが変更された場合でもキャッシュされたバージョンを表示し続けます。ブラウザのキャッシュを更新するには、manifestファイルを更新する必要があります。

注意: ブラウザがキャッシュデータの容量制限が異なる可能性があります(一部のブラウザでは、各サイトごとの設定制限があります)。 5MB)。