html5関連APIのアプリケーションキャッシュ

2010.10.13

こんにちは。mashimonatorです。
今回はアプリケーションキャッシュを使用して、
オフライン(ネットワークに接続されていない)環境でも閲覧ができるページのサンプルを作成してみました。

2010年10月時点で、Firefox3.6、Safari5.0、Chrome6.0にて動作確認
(Firefoxではアプリケーションキャッシュのイベントが正しく発生せず、JavaScriptが正常動作しない場合があります)

demo1を見る

demo2を見る

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

アプリケーションキャッシュとは、Webアプリケーションを構成しているすべてのリソース(HTML/CSS/JavaScript)をローカルにキャッシュしておき、ユーザがネットワークに接続していなくてもWebアプリケーションを利用できるようにするための仕様で、
例えば、GoogleのiPhone用サイトTOPページなどは、既に同様の機能を提供しています。
(圏外の状態でアクセスしても表示されるはずです)
Webアプリケーションをオフライン環境でも動作させるためのAPIは、他にもいくつか関連するものがありますが、今回は、その最も中核であり、実装のハードルが比較的低い(JavaScriptを使用したプログラミングが必ずしも必要な訳ではない)
本APIに焦点を当てました。

demo1について

demo1 は、アプリケーションキャッシュの最もスタンダードとなる使用方法です。
オンラインの状態で1度 demo1ページ へアクセスした方は、
(この際、Firefoxの場合はページ上部に「このサイトはオフライン作業用データの保存を求めています」というメッセージが表示されますので、許可してください)
ネットワークに接続していない状態(PCならLANケーブルを抜く、iPhoneなら機内モードにするなど)にして、再度同じURLへアクセスしてみてください。
本APIへ対応しているブラウザなら、オフライン環境でもページが表示されるはずです。

これらの動作は、「キャッシュマニフェスト」と呼ばれるファイルの作成と、
html要素が持つ「manifest」属性に該当のマニフェストファイルのURLを指定することだけで実現できます。
キャッシュマニフェストとは、キャッシュするリソースを列挙することを主目的としたファイルで、このファイル内に、一定のルールに従ってキャッシュすべきファイルやキャッシュしてはいけないファイル(必ずオンラインでのアクセスが必要なページなど)を指定します。

キャッシュマニフェストのサンプルです

CACHE MANIFEST

index.html
style.css
scripts.js
:

html要素にキャッシュマニフェストを関連付けるサンプルです。
マニフェストファイルのURLをhtmlタグのmanifest属性に指定するだけです。

<html lang="ja" manifest="cache.manifest">
:
</html>

demo2について

demo2 は、アプリケーションキャッシュを使用してローカルへファイルをキャッシュしている状況を、JavaScriptを使用してページ上に表示しているものです。
キャッシュするために行っている事は demo1 と基本的には変わりませんが、
JavaScriptから、「window.applicationCache」というオブジェクトを介してキャッシュに関するイベントを監視し、イベント通知があれば、その内容をページ上に表示するようにしています。
アプリケーションキャッシュから発生するイベントには下記のようなものがあります。

引用元:W3C Working Draft | 5.6 Offline Web applications — HTML5

・checking
 The user agent is checking for an update, or attempting to download the manifest for the first time. This is always the first event in the sequence.

・noupdate
 The manifest hadn't changed.

・downloading
 The user agent has found an update and is fetching it, or is downloading the resources listed by the manifest for the first time.

・progress
 The user agent is downloading resources listed by the manifest.

・cached
 The resources listed in the manifest have been downloaded, and the application is now cached.

・updateready
 The resources listed in the manifest have been newly redownloaded, and the script can use swapCache() to switch to the new cache.

・obsolete
 The manifest was found to have become a 404 or 410 page, so the application cache is being deleted.

・error
 The manifest was a 404 or 410 page, so the attempt to cache the application has been aborted.
 The manifest hadn't changed, but the page referencing the manifest failed to download properly.
 A fatal error occurred while fetching the resources listed in the manifest.
 The manifest changed while the update was being run.

Webといえば「ネットにつながっていれば使える」という発想に駆られますが、
その常識はHTML5と関連APIのリリースによって覆るかもしれませんね。
Webアプリケーション全体をキャッシュするような大きなデータを扱うには色々と問題がありますが、例えばメモ帳のような、個人的なデータを扱う程度の機能であれば、オンラインとオフラインの差が消えていくかもしれません。

また、補足ですが、iPhoneやAndroidといったスマートフォンでは、
以前と比べて改善されてきているとはいえ、やはりネットワークからのファイル読み取り速度には限界があり、そんな時にアプリケーションキャッシュを使用することで、サイト表示速度を向上できるという利用方法もあります。

一覧へ