オフラインアクセスは、Webベースのアプリケーションにとってますます重要になっています。すべてのブラウザにはキャッシュメカニズムがありますが、信頼性がなく、常に期待される役割を果たすとは限りません。 HTML5は、ApplicationCacheインターフェイスを使用して、オフライン使用によって引き起こされる問題のいくつかを解決します。
キャッシュインターフェイスを使用すると、次の3つの利点をアプリケーションにもたらすことができます。オフラインブラウジング - ユーザーはオフライン中に完全なウェブサイトを閲覧できます
速度 - キャッシュされたリソースはローカルリソースであるため、より速くロードされます。
サーバーの読み込みが少ない - ブラウザは、変更されたサーバーからリソースのみをダウンロードします。
App Cache（AppCacheとも呼ばれます）により、開発者は、オフラインユーザーにアクセスできるようにブラウザがキャッシュするファイルを指定できます。ユーザーがオフライン時に更新ボタンを押しても、アプリは通常ロードおよび実行されます。
マニフェストファイルをキャッシュします
キャッシュマニフェストファイルは、ブラウザがオフラインアクセスのためにキャッシュするリソースをリストする単純なテキストファイルです。
参照マニフェストファイル
アプリケーションのアプリケーションキャッシュを有効にするには、ドキュメントのHTMLタグにマニフェスト属性を追加します。
<html manifest = "example.appcache">
...
</html>
キャッシュするWebアプリの各ページにマニフェストプロパティを追加する必要があります。ページにマニフェスト属性が含まれていない場合、ブラウザはページをキャッシュしません（マニフェストファイルに明示的にリストされていない限り）。これは、マニフェストでユーザーが閲覧するすべてのWebページがアプリケーションキャッシュに暗黙的に追加されることを意味します。したがって、リスト内の各ページをリストする必要はありません。
マニフェストプロパティは、絶対URLまたは相対パスを指すことができますが、絶対URLは対応するネットワークアプリケーションと同じでなければなりません。マニフェストファイルは任意のファイル拡張子を使用できますが、正しいMIMEタイプを提供する必要があります（以下を参照）。
<html manifest = "http://www.example.com/example.mf">
...
</html>
マニフェストファイルは、テキスト/キャッシュマニフェストMIMEタイプで提供する必要があります。 Webサーバーまたは.htaccess構成にカスタムファイルタイプを追加する必要がある場合があります。
たとえば、このmimeタイプをApacheで提供するには、構成ファイルに次の行を追加します。
addTypeテキスト/cache-manifest .appcache app.yamlファイルでこのmimeタイプを提供するには、以下を追加します。
-url：/mystaticdir/(.*/.appcache）
static_files：mystaticdir // 1
mime_type：text/cache-manifest
アップロード：mystaticdir /(.*/。appcache）マニフェストファイル構造
シンプルなリスト形式は次のとおりです。
キャッシュマニフェスト
index.html
styleSheet.css
画像/logo.png
Scripts/main.jsこの例は、このマニフェストファイルを指定するWebページ上の4つのファイルをキャッシュします。
次のポイントに注意する必要があります：
キャッシュマニフェスト文字列は最初の行にある必要があり、不可欠です。
ウェブサイト上のキャッシュデータの量は、5 MBを超えてはなりません。ただし、Chrome Web Storeのアプリを作成している場合は、UnlimitedStorageを使用して制限を無制限にすることができます。
マニフェストファイルまたはITで指定されたリソースをダウンロードできない場合、キャッシュ更新プロセス全体を実行できません。この場合、ブラウザは元のアプリケーションキャッシュを引き続き使用します。
より複雑な例を見てみましょう：
キャッシュマニフェスト
＃2010-06-18：V2
＃明示的にキャッシュされた「マスターエントリ」。
キャッシュ：/favicon.ico
index.html
styleSheet.css
画像/logo.png
スクリプト/main.js
＃ユーザーがオンラインにする必要があるリソース。
ネットワーク：login.php
/myapi
http://api.twitter.com
＃main.pyがアクセスできない場合は、static.htmlが提供されます
＃offline.jpgは、画像/大/すべての画像の代わりに提供されます/
＃offline.htmlは、他のすべての.htmlファイルの代わりに提供されます
後退する：/main.py /static.html
画像/大/画像/offline.jpg
*.html /offline.html＃で始まる行はコメント行ですが、他の目的にも使用できます。アプリのキャッシュは、マニフェストファイルが変更された場合にのみ更新されます。たとえば、画像リソースを変更したり、JavaScript関数を変更したりした場合、これらの変更は再確認されません。マニフェストファイル自体を変更して、ブラウザにキャッシュされたファイルを更新する必要があります。生成されたバージョン番号、ファイルハッシュ値、またはタイムスタンプでコメント行を作成して、ユーザーがソフトウェアの最新バージョンを取得できるようにします。更新キャッシュセクションで説明されているように、新しいバージョンが表示された後にキャッシュをプログラム的に更新することもできます。
リストには、キャッシュ、ネットワーク、フォールバックの3つの異なる部分を含めることができます。
キャッシュ：これがエントリのデフォルト部分です。このヘッダーの下にリストされているファイルは、初めて明示的にキャッシュされます（またはキャッシュマニフェストの直後）。
ネットワーク：このセクションにリストされているファイルは、サーバーに接続する必要があるホワイトリストリソースです。これらのリソースへのすべてのリクエストは、ユーザーがオフラインであるかどうかに関係なく、キャッシュをバイパスします。ワイルドカードを使用できます。
後退する：このセクションはオプションであり、リソースにアクセスできない場合のフォールバックページを指定するために使用されます。最初のURIはリソースを表し、2番目はバックアップWebページを表します。両方のURIは関連している必要があり、マニフェストファイルと同じ起源でなければなりません。ワイルドカードを使用できます。
注：これらのセクションは任意の順序で配置でき、各セクションは同じリストで繰り返すことができます。
次のリストは、ユーザーがWebサイトのルートにオフラインにアクセスしようとするときに表示される包括的なWebページ（Offline.html）を定義し、他のすべてのリソース（リモートWebサイト上のリソースなど）にインターネット接続が必要であることを示します。
キャッシュマニフェスト
＃2010-06-18：V3
＃明示的にキャッシュされたエントリ
index.html
css/style.css
＃オフライン.htmlがユーザーがオフラインである場合に表示されます
後退する：
//offline.html
＃他のすべてのリソース（サイトなど）は、ユーザーがオンラインであることを要求します。
ネットワーク：
*
＃キャッシュへの追加リソース
キャッシュ：
画像/logo1.png
画像/logo2.png
画像/logo3.png：システムは、マニフェストファイルを参照するHTMLファイルを自動的にキャッシュすることに注意してください。したがって、リストに追加する必要はありませんが、そうすることをお勧めします。
注：SSLを介して提供されるWebページに設定されたHTTPキャッシュヘッダーとキャッシュ制限は、キャッシュマニフェストに置き換えられます。したがって、HTTPSが提供するWebページはオフラインで実行できます。キャッシュを更新します次のいずれかが発生しない限り、アプリはオフラインの後にキャッシュされたままです。
ユーザーは、Webサイトでブラウザのデータストレージをクリアします。
マニフェストファイルが変更されました。注：マニフェストにリストされているファイルを更新しても、ブラウザがリソースを再キャッシュすることを意味しません。マニフェストファイル自体を変更する必要があります。
アプリケーションキャッシュはプログラムで更新されます。
キャッシュステータスwindow.applicationcacheオブジェクトは、ブラウザのアプリケーションキャッシュへのプログラマティックアクセス方法です。そのステータス属性を使用して、キャッシュの現在のステータスを表示できます。
var appcache = window.applicationcache;
switch（appcache.status）{
case appcache.uncached：// uncached == 0
「不要」を返します。
壊す;
ケースappcache.idle：// idle == 1
「アイドル」を返します。
壊す;
ケースappcache.checking：// checking == 2
「チェック」を返します。
壊す;
ケースappcache.downloading：//ダウンロード== 3
「ダウンロード」を返します。
壊す;
ケースappcache.updateready：// updateready == 4
「updateready」を返します。
壊す;
case appcache.obsolete：// obsolete == 5
「時代遅れ」を返します。
壊す;
デフォルト：
「uknownキャッシュステータス」を返します。
壊す;
};
プログラムでキャッシュを更新するには、最初にapplicationcache.update（）を呼び出します。これにより、ユーザーのキャッシュが更新されます（マニフェストファイルが変更された場合）。最後に、ApplicationCache.StatusがUpdateready状態にある場合、ApplicationCache.swapCache（）を呼び出して、元のキャッシュを新しいキャッシュに置き換えます。
var appcache = window.applicationcache;
appcache.update（）; //ユーザーのキャッシュを更新しようとします。
...
if（appcache.status == window.applicationcache.updateready）{
appcache.swapcache（）; //フェッチが成功し、新しいキャッシュを交換しました。
}
注：この方法でupdate（）とswapcache（）を使用しても、ユーザーに更新されたリソースは提供されません。このプロセスにより、ブラウザが新しいマニフェストをチェックし、指定された更新をダウンロードし、アプリキャッシュを補充できるようになります。したがって、新しいコンテンツがユーザーに提供される前に、Webページを2回リロードする必要があります。1つ目は新しいアプリケーションキャッシュを取得することです。2つ目はWebページのコンテンツを更新することです。良いニュースは、2回リロードする手間を避けることができるということです。 Webサイトの最新バージョンにユーザーを更新するには、Webページが読み込まれているときにリスナーを監視するupdatereadyイベントを監視するためにセットアップします。
//ページの読み込みで新しいキャッシュが利用可能であるかどうかを確認します。
window.addeventlistener（ 'load'、function（e）{
window.applicationcache.addeventlistener（ 'updateready'、function（e）{
if（window.applicationcache.status == window.applicationcache.updateready）{
//ブラウザは新しいアプリキャッシュをダウンロードしました。
//新しいホットネスを取得するためにページをリロードしてページをリロードします。
window.applicationcache.swapcache（）;
if（confism（ 'このサイトの新しいバージョンが利用可能です。ロード？'））{
window.location.reload（）;
}
} それ以外 {
//マニフェストは変更されませんでした。サーバーに新しいものはありません。
}
}、 間違い）;
}、 間違い）;
AppCacheイベント予想通り、キャッシュの状態を聞くために追加のイベントが使用されます。ブラウザは、ダウンロードの進行状況、アプリケーションキャッシュの更新、エラーステータスのために対応するイベントをトリガーします。次のコードスニペットは、各キャッシュイベントタイプのイベントリスナーをセットアップします。
function handlecacheevent（e）{
// ...
}
function handlecacheerror（e）{
Alert（ 'エラー：キャッシュが更新に失敗しました！'）;
};
//マニフェストの最初のキャッシュの後に発射されました。
appcache.addeventlistener（ 'cached'、handlecacheevent、false）;
//アップデートの確認。常に最初のイベントはシーケンスで発射されました。
appcache.addeventListener（ 'チェック'、Handlecacheevent、false）;
//アップデートが見つかりました。ブラウザはリソースを取得しています。
appcache.addeventlistener（ 'downloading'、handlecacheevent、false）;
//マニフェストは404または410を返し、ダウンロードは失敗しました、
//ダウンロード中にマニフェストが変更されました。
appcache.addeventlistener（ 'error'、handlecacheerror、false）;
//マニフェストの最初のダウンロード後に発射されました。
appcache.addeventlistener（ 'noupdate'、handlecacheevent、false）;
//マニフェストファイルが404または410を返した場合に発射されます。
//これにより、アプリケーションキャッシュが削除されます。
appcache.addeventlistener（ 'obsolete'、handlecacheevent、false）;
//マニフェストにリストされているリソースごとに発射します。
appcache.addeventlistener（ 'progress'、handlecacheevent、false）;
//マニフェストリソースが新たにレッドロードされたときに発射されました。
appcache.addeventlistener（ 'updateready'、handlecacheevent、false）;
マニフェストファイルまたはその中で指定されたリソースをダウンロードできない場合、更新全体が失敗します。この場合、ブラウザは元のアプリケーションキャッシュを引き続き使用します