[実用HTML5API]マニフェストファイルを使用したキャッシュ(Application Cache)

아티클
03/05/2012

前回の投稿でローカルストレージに画像ファイルを保存してキャッシュするという、いささか珍妙な方法を紹介しましたが、やはり HTML5 のキャッシュといえば Application Cache だろうということで、こちらの方法も紹介しておきます。(と、いうか普通はこっちが先ですね)

ただし、この方法、残念なことに Internet Explorer 9 では動作しませんので、この機能を試すには Internet Explorer 10 の最新の DP か、その他のモダン Web ブラウザーをお使いいただければと思います。

Application Cache の使い方

Web コンテンツで Application Cache を利用するには、マニフェストファイルというものを用意し、キャッシュしたいファイルを列挙して記述します。

例えば以下のような、拡張子 appcache (※) というファイルを用意して、キャッシュさせたいファイルを記述します。

ファイル : myPage.appcache

CACHE MANIFEST
js/myPage.js
css/myPage.css
nextPage.htm
img/one.png
img/two.png
img/three.png
img/four.png
img/five.png

(※) アプリケーションキャッシュで使われるマニフェストファイルの推奨拡張子は、以前は .manifest でしたが現在は .appcache へと変更されています少し前のドキュメントでは .manifest ファイルが指定されていますが、内容的に異なる点はとくにありません。

キャッシュさせたいファイルは、より明示的に CACHE: の後に記述してもいいですし、逆にキャッシュさせたくない、サーバーサイドで動作するページなどは NETWORK : の後に記述します。

なお詳しくは、以下のドキュメントをご参照ください。

5.6.3 The cache manifest syntax
https://www.w3.org/TR/html5/offline.html#manifests

Web サーバー側で、拡張子 appcache に対する MIME 設定として “text/cache-manifest” を指定します。ちなみに、MIME タイプと拡張子が結びついていれば OK だそうで、拡張子を任意のものに変えても動作するそうです。

HTML ファイルでは、以下のように <html> タグの manifest 属性マニフェストファイルを指定します。

<!DOCTYPE html >

<html manifest="myPage.appcache">
<head>
    <title></title>
    <link href="css/myPage.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <a href="next.htm">contenlt</a>
    <br>
    <img src="img/one.png" alt="" />
    <br />
    <img src="img/two.png" alt="" />
    <br />
    <img src="img/three.png" alt=""/>
</body>
</html>

以上で Application Cache の設定は完了です。

この設定により、マニフェストファイルに指定された URL に対しては、一旦接続したあとは、リクエストが飛ばなくなります。

ただし、Web サーバーのリクエストログを読む限り、[F5] キーを押下するなどの、意図的に更新をおこった場合はクエストが発生するようです。

キャッシュされたコンテンツを更新するには

Application Cache では、マニフェストファイルになんらかの変更があった場合、Web ブラウザーが更新を検知して一連のキャッシュ作業をやり直します。

しかし、このマニフェストファイルの更新の検知は、一部のスマートフォンブラウザーではサポートされておらず、Web ブラウザーの設定でキャッシュをクリアする必要があるなど、コンテンツの提供者側でコントロールできない状況が生まれます。また、Web ブラウザーの検知機能に頼らず、意図的にキャッシュの内容を更新したい場合もあるでしょう。

そういった場合には、ApplicationCache オブジェクトを使用して JavaScript からキャッシュの更新作業行うことができます。

JavaScript からのキャッシュの更新

単純にキャッシュをクリアしたいのであれば、ApplicationCache オブジェクトの提供する swapCache (キャッシュの入れ替え) メソッドと reload (リロード) メソッドを続けて発行すれば OK です。

ただ、ApplicationCache オブジェクトには、マニフェストファイルが更新されたかどうかを判断するプロパティやメソッド、イベントハンドラーが用意されているので、それらと組み合わせても良いでしょう。

たとえば

//更新をチェック
window.applicationCache.update();
//キャッシュがアップデート可能かどうか比較
if (window.applicationCache.status ==window.applicationCache.UPDATEREADY)
window.applicationCache.swapCache();
window.location.reload();

または

window.applicationCache.update();
//イベントハンドラーの指定
window.applicationCache.addEventListener("updateready", function() {
        if (confirm("アップデートしますか?")) {
            window.applicationCache.swapCache();
            window.location.reload();
        }
    }, true);

などです。

その他、Internet Explorer 10 でサポートされている Application Cache については、以下のドキュメントをご覧ください。

Internet Explorer デベロッパーセンター Application Cache API ("AppCache")
https://msdn.microsoft.com/ja-jp/library/ie/hh673546.aspx#Application_Cache_API_AppCache

先日 (というか昨日) 投稿したローカルストレージと組み合わせ、Web コンテンツの表示の高速化 (キャッシュ)、オフライン機能の実装など、いろいろと応用いただければと思います。

Clicky

다음을 통해 공유

[実用HTML5API]マニフェストファイルを使用したキャッシュ(Application Cache)

Application Cache の使い方

キャッシュされたコンテンツを更新するには

JavaScript からのキャッシュの更新

추가 리소스