HTML5でiPhone用Webアプリをオフライン対応に：iPhoneで動かす業務用Webアプリ開発入門（5）（2/2 ページ）

» 2011年04月18日 00時00分公開

[石田健亮，株式会社ドリーム・アーツ]

前のページへ 1|2 　　　　　　

HTMLファイルをキャッシュマニフェストに含めるには

　キャッシュマニフェストファイルに、すべてのJavaScriptファイル、画像ファイル、CSSファイルを記述すると、ページのロード時間を劇的に短縮できます。

　キャッシュマニフェストには、これらのファイルだけでなくHTML自体を含めることができます。HTML自体をキャッシュに格納すると、そのURLのときは一切サーバにリクエストを出さずに画面を表示可能になります。

　先ほどの例では「CACHE:」の1行目の「/h/MobileView.do」がHTMLです。

　すべてのデータをAjaxで取得するアプリは、HTMLは毎回同じファイルになるはずなので、このようにHTML自体をキャッシュできます。

　こうしておくと、電波がまったく届いていないオフライン状態でも、Safariのブックマークなどから起動すると、普通にアプリが動作します。iPhoneの設定画面で機内モードにして試してみました（図）。

図　左上の緑の線で囲んだところが機内モード

　ドリーム・アーツで開発している「店舗matic」「Shopらん」の場合、前回説明したlocalStorage機能を使って、データについてもオフラインでの利用に対応しているので、完全にオフライン状態でもアプリを利用できます。

対応必須！キャッシュの更新スクリプト

　このようにiPhoneのSafariでは、キャッシュマニフェストによるアプリケーションキャッシュは、かなり強力ですが、設定画面から［キャッシュを消去］を選択しても、キャッシュは消去されません。

　前述したとおり、キャッシュマニフェストファイルを変更してもマニフェストファイル自体がキャッシュされてしまいリクエストが来ないので、キャッシュを更新できないのです。

キャッシュデータの削除はiTunesで“復元”のみ？

　いろいろ試してみましたが、一度キャッシュされてしまったデータを削除するには、iTunesからiPhoneを“復元”するほかなさそうです。

　さすがにこれでは、アプリの不具合修正やバージョンアップがあっても更新できず実用的ではないので、アプリケーションキャッシュを使う場合は、JavaScriptで更新をチェックする処理をセットで作っておき、スクリプトから明示的にキャッシュを更新する必要があります。

　これをやらずに、いきなりアプリケーションキャッシュを試すと、もうそのURLでは二度とロードしなくなるので、要注意です。

キャッシュのチェックスクリプト

　JavaScriptでキャッシュを更新するのは簡単です。スクリプトの中で「window.applicationCache.update()」を呼び出せばOKです。この関数を呼び出すと、キャッシュマニフェストファイルをサーバからダウンロードしてキャッシュが更新されていないかどうかをチェックします。

　ここで初めて、マニフェストファイルに入れておいたコメントの中のバージョン番号が役に立ちます。もし、キャッシュが更新されていた場合は、applicationCacheオブジェクトでupdatereadyイベントが発生するので、「applicationCache.swapCache()」を呼び出して新しいキャッシュに切り替えます。

　これを実行するスクリプトは、以下のようになります。

var cache = window.applicationCache;
cache.addEventListener("updateready", function() {
    if (confirm('アプリケーションの新しいバージョンが利用可能です。更新しますか？')) {
        cache.swapCache();
        location.reload();
    }
});
if (navigator.onLine) {
    cache.update();
}

　このスクリプトをHTMLのロードイベントで動作する関数の中に記述すると、ページのロード時にキャッシュの更新をチェックして、更新する必要がある場合は確認画面を表示してキャッシュを更新するようになります。