アプリケーションキャッシュでは、キャッシュマニフェストファイルを作成することによって、Webアプリケーションのオフライン版を作るのは簡単です。
アプリケーションキャッシュとは何ですか？
HTML5はWebアプリケーションがキャッシュされ、かつインターネットに接続せずにアクセス可能であることを意味し、アプリケーションキャッシュを紹介します。
アプリケーションキャッシュは、アプリケーションに3つの利点を与えます：
- オフラインブラウジング - 彼らはオフライン時にユーザーがアプリケーションを使用することができます
- スピード - キャッシュされたリソースは、より速くロード
- 減少し、サーバーの負荷 - ブラウザだけでサーバーからリソースを変更/更新ダウンロードします
バックグラウンド
Webアプリケーションは、ネットワークからダウンロードする必要があるWebページで構成されています。 そのためには、ネットワーク接続がなければなりません。 しかし、多くの場合は、ユーザーが自分のコントロールを超えた状況に起因するネットワークに接続できない場合があります。 HTML5でもキャッシュマニフェストを使用してネットワークに接続せずにWebアプリケーションにアクセスする機能を提供します。
Webアプリケーションは、URLによって識別されるリソースで構成されています。 これらは、HTML、CSS、JavaScriptを、画像やウェブアプリケーションをレンダリングするために必要な任意の他のソースにすることができます。 それらのアドレスは、追加または削除された新しいWebアドレスを示し、Webアプリケーションの著者によって定期的に更新することができたマニフェストファイルにコピーすることができます。 初めてネットワークに接続する場合、Webブラウザは、HTML5マニフェストファイルを読み込む与えられたリソースをダウンロードし、ローカルに保存されます。 次に、ネットワーク接続が存在しない場合に、Webブラウザではなく、ローカルコピーに移行し、Webアプリケーションをオフラインでレンダリングされます。
ブラウザのサポート
表中の数字は完全にアプリケーションキャッシュをサポートする最初のブラウザのバージョンを指定します。
| API | |||||
|---|---|---|---|---|---|
| Application Cache | 4.0 | 10.0 | 3.5 | 4.0 | 11.5 |
HTMLキャッシュManifestの例
以下の例は、キャッシュマニフェストでHTML文書を示し(for offline browsing) ：
例
<!DOCTYPE HTML>
<html manifest="demo.appcache">
<body>
The content of the document......
</body>
</html> »それを自分で試してみてください キャッシュマニフェストの基本
オフラインアプリケーションが動作するためには、キャッシュマニフェストファイルは、Web開発者が作成する必要があります。 Webアプリケーションが複数のページを超える場合は、各ページには、キャッシュマニフェストを指すマニフェスト属性を持っている必要があります。 マニフェストを参照するすべてのページには、ローカルに保存されます。 キャッシュマニフェストファイルには、サーバーの別の部分にあるテキストファイルです。 これは、次のコンテンツタイプを添えなければなりません。
text/cache-manifest
アプリケーションキャッシュを有効にするには、含まれmanifest文書の中に属性<html>タグを：
<!DOCTYPE HTML>
<html manifest="demo.appcache">
...
</html>
すべてのページmanifestユーザーが訪れたときに指定された属性がキャッシュされます。 場合はmanifest属性が指定されていない、ページがキャッシュされません(unless the page is specified directly in the manifest file) 。
マニフェストファイルの推奨ファイル拡張子は次のとおりです。 ".appcache"
マニフェストファイルが添えする必要がありcorrect media typeで、 "text/cache-manifest" 。 Webサーバ上で設定する必要があります。
マニフェストファイル
マニフェストファイルには、どのようなキャッシュするためのブラウザ告げる単純なテキストファイルです(and what to never cache) 。
マニフェストファイルには、3つのセクションがあります。
- CACHE MANIFEST -彼らが最初にダウンロードされた後、このヘッダーの下にリストされているファイルがキャッシュされます
- NETWORK -このヘッダの下に列挙されたファイルは、サーバーへの接続を必要とし、キャッシュされることはありません
- FALLBACK -ページにアクセスできない場合、このヘッダーの下にリストされたファイルは、フォールバックのページを指定します
CACHE MANIFEST
最初の行、CACHE MANIFESTは、必要とされています。
CACHE MANIFEST
/theme.css
/logo.gif
/main.js
CSSファイル、GIF画像、およびJavaScriptファイル：マニフェストファイルには、上記の3つのリソースの一覧が表示されます。 マニフェストファイルがロードされると、ブラウザは、Webサイトのルートディレクトリから3つのファイルをダウンロードします。 そして、ユーザがインターネットに接続されていない時はいつでも、リソースがまだ使用可能になります。
ネットワーク
以下のNETWORKセクションでは、ファイルを指定すること"login.asp"キャッシュされてはいけませんし、オフラインで利用可能ではありません。
NETWORK:
login.asp
アスタリスクは、他のすべてのリソース/ファイルは、インターネット接続が必要なことを示すために使用することができます。
NETWORK:
*
後退する
FALLBACKセクションは、以下のように指定し"offline.html" 、/ HTML /カタログ内のすべてのファイルの代わりに提供されます、インターネット接続が確立できない場合には：
FALLBACK:
/html/ /offline.html
注：最初のURIがリソースで、二つ目はフォールバックです。
キャッシュを更新
アプリケーションがキャッシュされたら、次のいずれかが発生するまで、それがキャッシュされたままです。
- ユーザーは、ブラウザのキャッシュをクリアします
- マニフェストファイルが変更されている(see tip below)
- アプリケーションキャッシュをプログラム的に更新されます
例 - 完全なキャッシュマニフェストファイル
CACHE MANIFEST
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js
NETWORK:
login.asp
FALLBACK:
/html/ /offline.html
Tip:で始まる行"#"コメント行ですが、また別の目的を果たすことができます。 ときにマニフェストファイルの変更アプリケーションのキャッシュのみが更新されます。 あなたは、画像を編集したり、JavaScriptの機能を変更する場合は、それらの変更を再キャッシュされません。 コメント行の日付とバージョンを更新すると、ブラウザの再キャッシュファイルを作成するための一つの方法です。
アプリケーションキャッシュの注意事項
あなたがキャッシュ何に注意してください。
ファイルがキャッシュされたら、ブラウザを使用すると、サーバー上のファイルを変更した場合でも、キャッシュされたバージョンを表示していきます。 ブラウザがキャッシュを更新確保するには、マニフェストファイルを変更する必要があります。
注意：ブラウザは、キャッシュされたデータの異なるサイズの制限を有することができる(some browsers have a 5MB limit per site) 。