最後の仕上げとして、予定表アプリケーションをネットワークに接続していない状態、すなわちオフラインでも動作するようにしてみましょう。それには、クライアントサイドにデータを保存するだけでは不十分です。WebブラウザにWebページを強制的にキャッシュさせる仕組みである「キャッシュマニフェスト」を使う必要があります。キャッシュマニフェストも、HTML5で追加された機能の一つです。

強制的にキャッシュさせる

 この仕組みを使うにはまず、マニフェストファイルを作ります。例えば、yotei.htmlというWebページをキャッシュさせたいなら

CACHE MANIFEST
# バージョン 1.0
# キャッシュするファイルを指定
CACHE:
yotei.html

のように書いたファイルを、拡張子「.manifest」を付けて文字コードUTF-8で保存します。キャッシュするファイルには、HTMLファイルだけでなく、アプリケーションの動作に必要な画像ファイル、JavaScriptファイル、外部CSSファイルがあれば、それらをすべて指定します。#をつけた行はコメントとして扱われます。

 次に、このマニフェストファイルをサーバーに配置します。オフラインで動作させると言っても、初回は必ずオンラインでHTMLドキュメントにアクセスします。その際に、このマニフェストファイルを読み込むようにブラウザに指示しておくと、そこで指定したファイルをクライアントサイドにキャッシュしておいてくれます。

 それには、マニフェストファイルがyotei.manifestという名前であれば、HTMLドキュメントのhtmlタグに
<html manifest="yotei.manifest">
と記述しておきます。上記の場合はHTMLドキュメントとマニフェストファイルが同じディレクトリだと見なされます。マニフェストファイルのURLを、httpから始まる絶対URLで書くこともできます。

 2回目以降のアクセスでは、Webブラウザは最初にマニフェストファイルを読み込んで、マニフェストファイルに変更があれば、サーバーからファイルを新たに取得します。変更がなければ、キャッシュしておいたファイルを使います。「マニフェストファイルが変更されていたら」というのがポイントです。HTMLやJavaScriptのファイル自体に変更があっても感知されないので注意してください。

 マニフェストファイルが変更されているかどうかはコメント部分も含めて判定します。そのためマニフェストファイルに、バージョン番号や更新日時を入れておくのが一般的です。ただし、マニフェストファイルを運用するには、Webサーバーの動作を指定する.htaccessファイルの設定が必要な場合があるので、すべての環境でオフラインで動作することを保証するわけではありません。