はじめに
ウェブベースのアプリケーションをオフラインで利用できるようにすることがますます重要になっています。はい。すべてのブラウザは、指示された場合、ページとリソースを長期間キャッシュに保存できますが、ブラウザは他のアイテムに空きを作るため、いつでも個々のアイテムをキャッシュから削除できます。HTML5 では、ApplicationCache インターフェースを使用して、オフライン状態のデメリットの一部を解消しています。キャッシュ インターフェースを使用すると、アプリケーションに次の 3 つのメリットがあります。
- オフライン ブラウジング - ユーザーはオフラインでサイト全体を閲覧できます
- 速度 - リソースはディスクから直接取得され、ネットワークにアクセスする必要はありません。
- 復元力 - サイトが「メンテナンス」のために停止した場合（誰かが誤ってすべてを破壊した場合など）、ユーザーにはオフライン エクスペリエンスが提供されます。
アプリケーション キャッシュ（AppCache）を使用すると、デベロッパーはブラウザがキャッシュに保存し、オフライン ユーザーが利用できるようにするファイルを指定できます。ユーザーがオフライン中に更新ボタンを押しても、アプリは正しく読み込まれて動作します。
キャッシュ マニフェスト ファイル
キャッシュ マニフェスト ファイルは、オフライン アクセス用にブラウザがキャッシュに保存するリソースを一覧表示するシンプルなテキスト ファイルです。
マニフェスト ファイルを参照する
アプリのアプリケーション キャッシュを有効にするには、ドキュメントの html タグにマニフェスト属性を含めます。
<html manifest="example.appcache">
...
</html>
manifest 属性は、キャッシュに保存するウェブ アプリケーションのすべてのページに含める必要があります。manifest 属性が含まれていない場合、ブラウザはページをキャッシュに保存しません（マニフェスト ファイル自体に明示的にリストされている場合を除きます）。つまり、ユーザーが移動したページで manifest が含まれている場合、そのページは暗黙的にアプリ キャッシュに追加されます。そのため、マニフェストにすべてのページをリストする必要はありません。ページがマニフェストを指している場合、このページがキャッシュに保存されるのを防ぐ方法はありません。
Chrome で about://://appcache-internals/ にアクセスすると、アプリケーション キャッシュによって管理されている URL を確認できます。ここで、キャッシュを消去したり、エントリを確認したりできます。Firefox には同様のデベロッパー ツールがあります。
manifest 属性は、絶対 URL または相対パスを参照できますが、絶対 URL はウェブ アプリケーションと同じオリジンにある必要があります。マニフェスト ファイルのファイル拡張子は任意ですが、正しい mime-type で提供する必要があります（下記を参照）。
<html manifest="http://www.example.com/example.mf">
...
</html>
マニフェスト ファイルは、mime-type text/cache-manifest で配信する必要があります。ウェブサーバーまたは .htaccess 構成にカスタム ファイルタイプを追加することが必要になる場合があります。
たとえば、Apache でこの MIME タイプを提供する場合は、構成ファイルに次の行を追加します。
AddType text/cache-manifest .appcache
また、Google App Engine の app.yaml ファイルの場合は以下のようになります。
- url: /mystaticdir/(.*\.appcache)
static_files: mystaticdir/\1
mime_type: text/cache-manifest
upload: mystaticdir/(.*\.appcache)
この要件はしばらく前に仕様から削除され、最新バージョンの Chrome、Safari、Firefox では不要になりましたが、古いブラウザと IE11 で動作させるには mime-type が必要です。
マニフェスト ファイルの構造
マニフェストは、html 要素の manifest 属性を介してリンクする別のファイルです。簡単なマニフェストは次のようになります。
CACHE MANIFEST
index.html
stylesheet.css
images/logo.png
scripts/main.js
http://cdn.example.com/scripts/main.js
この例では、このマニフェスト ファイルを指定するページ上の 4 つのファイルをキャッシュに保存します。
注意すべき点がいくつかあります。
CACHE MANIFEST文字列は最初の行で、必須です。- ファイルは別のドメインのものでもかまいません
- 一部のブラウザでは、アプリで使用できるストレージ割り当ての量に制限が設けられています。たとえば、Chrome では、AppCache は他のオフライン API が共有できる一時ストレージの共有プールを使用します。Chrome ウェブストア向けのアプリを作成している場合は、
unlimitedStorageを使用するとこの制限が解除されます。 - マニフェスト自体が 404 または 410 を返すと、キャッシュは削除されます。
- マニフェストまたはマニフェストで指定されたリソースのダウンロードに失敗すると、キャッシュ更新プロセス全体が失敗します。エラーが発生した場合、ブラウザは古いアプリケーション キャッシュを引き続き使用します。
より複雑な例を見てみましょう。
CACHE MANIFEST
# 2010-06-18:v2
# Explicitly cached 'master entries'.
CACHE:
/favicon.ico
index.html
stylesheet.css
images/logo.png
scripts/main.js
# Resources that require the user to be online.
NETWORK:
*
# static.html will be served if main.py is inaccessible
# offline.jpg will be served in place of all images in images/large/
# offline.html will be served in place of all other .html files
FALLBACK:
/main.py /static.html
images/large/ images/offline.jpg
「#」で始まる行はコメント行ですが、別の目的にも使用できます。アプリケーションのキャッシュは、マニフェスト ファイルが変更された場合にのみ更新されます。たとえば、画像リソースを編集したり、JavaScript 関数を変更したりしても、それらの変更は再キャッシュされません。キャッシュに保存されたファイルを更新するようブラウザに通知するには、マニフェスト ファイル自体を変更する必要があります。
常に更新されるタイムスタンプやランダムな文字列を使用して、毎回強制的に更新しないようにしてください。マニフェストは、更新中に 2 回チェックされます。1 回は開始時に、もう 1 回はキャッシュに保存されているすべてのファイルが更新された後にチェックされます。更新中にマニフェストが変更された場合、ブラウザが一部のファイルをあるバージョンから、他のファイルを別のバージョンから取得したため、キャッシュが適用されず、後で再試行される可能性があります。
キャッシュは更新されますが、更新は現在のバージョンのキャッシュからページが読み込まれた後に行われるため、ページが更新されるまでブラウザはこれらのファイルを使用しません。
マニフェストには、CACHE、NETWORK、FALLBACK の 3 つのセクションを含めることができます。
CACHE:- これはエントリのデフォルト セクションです。このヘッダーの下（または
CACHE MANIFESTの直後）にリストされているファイルは、初回ダウンロード後に明示的にキャッシュに保存されます。NETWORK: - このセクションにリストされているファイルは、キャッシュにない場合はネットワークから取得される場合があります。それ以外の場合は、ユーザーがオンラインであってもネットワークは使用されません。ここで、特定の URL をホワイトリストに登録できます。または、すべての URL を許可する「」を指定することもできます。ほとんどのサイトでは「」が必要です。
FALLBACK: - リソースにアクセスできない場合の代替ページを指定するオプションのセクション。最初の URI はリソースで、2 番目の URI はネットワーク リクエストが失敗した場合やエラーが発生した場合に使用されるフォールバックです。両方の URI は、マニフェスト ファイルと同じオリジンから取得する必要があります。特定の URL だけでなく、URL の接頭辞もキャプチャできます。「images/large/」は、「images/large/whatever/img.jpg」などの URL からのエラーをキャプチャします。
次のマニフェストは、ユーザーがオフラインでサイトのルートにアクセスしようとしたときに表示される「キャッチオール」ページ（offline.html）を定義します。また、他のすべてのリソース（リモート サイト上のリソースなど）にはインターネット接続が必要であることを宣言します。
CACHE MANIFEST
# 2010-06-18:v3
# Explicitly cached entries
index.html
css/style.css
# offline.html will be displayed if the user is offline
FALLBACK:
/ /offline.html
# All other resources (e.g. sites) require the user to be online.
NETWORK:
*
# Additional resources to cache
CACHE:
images/logo1.png
images/logo2.png
images/logo3.png
キャッシュの更新
アプリケーションがオフラインになると、次のいずれかが発生するまでキャッシュに残ります。
- ユーザーがサイトのブラウザのデータ ストレージを消去した場合。
- マニフェスト ファイルが変更されます。注: マニフェストに記載されているファイルを更新しても、ブラウザがそのリソースを再キャッシュするわけではありません。マニフェスト ファイル自体を変更する必要があります。
キャッシュ ステータス
window.applicationCache オブジェクトは、ブラウザのアプリキャッシュへのプログラムによるアクセスです。status プロパティは、キャッシュの現在の状態を確認するのに役立ちます。
var appCache = window.applicationCache;
switch (appCache.status) {
case appCache.UNCACHED: // UNCACHED == 0
return 'UNCACHED';
break;
case appCache.IDLE: // IDLE == 1
return 'IDLE';
break;
case appCache.CHECKING: // CHECKING == 2
return 'CHECKING';
break;
case appCache.DOWNLOADING: // DOWNLOADING == 3
return 'DOWNLOADING';
break;
case appCache.UPDATEREADY: // UPDATEREADY == 4
return 'UPDATEREADY';
break;
case appCache.OBSOLETE: // OBSOLETE == 5
return 'OBSOLETE';
break;
default:
return 'UKNOWN CACHE STATUS';
break;
};
マニフェストの更新をプログラムで確認するには、まず applicationCache.update() を呼び出します。これにより、ユーザーのキャッシュの更新が試行されます（マニフェスト ファイルが変更されている必要があります）。最後に、applicationCache.status が UPDATEREADY 状態になると、applicationCache.swapCache() を呼び出すと、古いキャッシュが新しいキャッシュにスワップされます。
var appCache = window.applicationCache;
appCache.update(); // Attempt to update the user's cache.
...
if (appCache.status == window.applicationCache.UPDATEREADY) {
appCache.swapCache(); // The fetch was successful, swap in the new cache.
}
幸い、この処理は自動化できます。ユーザーをサイトの最新バージョンに更新するには、ページ読み込み時に updateready イベントをモニタリングするリスナーを設定します。
// Check if a new cache is available on page load.
window.addEventListener('load', function(e) {
window.applicationCache.addEventListener('updateready', function(e) {
if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
// Browser downloaded a new app cache.
if (confirm('A new version of this site is available. Load it?')) {
window.location.reload();
}
} else {
// Manifest didn't changed. Nothing new to server.
}
}, false);
}, false);
AppCache イベント
予想どおり、キャッシュの状態をモニタリングするための追加イベントが公開されます。ブラウザは、ダウンロードの進行状況、アプリ キャッシュの更新、エラー状態などのイベントを発生させます。次のスニペットは、各タイプのキャッシュ イベントのイベント リスナーを設定します。
function handleCacheEvent(e) {
//...
}
function handleCacheError(e) {
alert('Error: Cache failed to update!');
};
// Fired after the first cache of the manifest.
appCache.addEventListener('cached', handleCacheEvent, false);
// Checking for an update. Always the first event fired in the sequence.
appCache.addEventListener('checking', handleCacheEvent, false);
// An update was found. The browser is fetching resources.
appCache.addEventListener('downloading', handleCacheEvent, false);
// The manifest returns 404 or 410, the download failed,
// or the manifest changed while the download was in progress.
appCache.addEventListener('error', handleCacheError, false);
// Fired after the first download of the manifest.
appCache.addEventListener('noupdate', handleCacheEvent, false);
// Fired if the manifest file returns a 404 or 410.
// This results in the application cache being deleted.
appCache.addEventListener('obsolete', handleCacheEvent, false);
// Fired for each resource listed in the manifest as it is being fetched.
appCache.addEventListener('progress', handleCacheEvent, false);
// Fired when the manifest resources have been newly redownloaded.
appCache.addEventListener('updateready', handleCacheEvent, false);
マニフェスト ファイルまたはそれに指定されたリソースのダウンロードに失敗すると、更新全体が失敗します。このような障害が発生した場合、ブラウザは引き続き古いアプリケーション キャッシュを使用します。
参照
- ApplicationCache API 仕様
- Application Cache is a douchebag - AppCache の注意点と問題について説明します。