オフラインwebアプリケーションについて

以前の投稿でOffline Web Applications について記載しましたが、ここでもう少し掘り下げて調べてみます。

注意点としては、この機能は現状では非推奨となっているので、
「こうゆう機能もある(あった)」という程度に留めておいてよいと思います。
(firefox62以降では使用できません)

オフラインwebアプリケーションを実現には、HTML5の仕組みのアプリケーションキャッシュ機能を使います。
具体的にはアプリケーション自身(HTML、CSS、javascript、画像、音声等のリソースを含む)のデータを全て保存します。

ブラウザのキャッシュとは違うので、ブラウザのキャッシュクリアをしてもデータは削除されず、
ユーザが意図して消さない限りは永続的に残ります。

こうすることでそのwebアプリケーションはオフライン環境でも動作する(アプリケーションからの通信を行わない前提になります)
ことが可能になります。
厳密に言うと、アプリケーションから通信が発生した場合、オンラインに切り替わった段階で通信処理が再開する。という動きになります。

また、全てのブラウザ(バージョン)で動作が保証されてはいないので、実行環境には注意が必要です。

webアプリケーションキャッシュを使うには、マニフェストファイルが必要になります。
このファイルにはwebアプリケーションが必要とするURLの一覧が含まれています。

1行目に

CACHE MANIFEST

を記載します。

コメントは

と書きます。

セクションは

CACHE

NETWORK

FALLBACK

SETTINGS

があり、それぞれ次の意味になります。

CACHE
キャッシュするファイルを指定する

NETWORK
ここに書いたファイルはオンラインでサーバ接続が必要

FALLBACK
もしオンラインで接続することができない場合、ここに書いた代替のファイルにアクセスします。

具体的には以下のように書きます。
各ファイル名はダミーです。

CACHE MANIFEST
# ver1.0

CACHE:
test.html
test.css
test.js
images/test.png

NETWORK:
*

FALLBACK:
/fallback.php /dummy.html

マニュフェストファイルが更新された際に、キャッシュ内容の更新を行う為に、
2行目にはバージョン番号を記載することが多いです。

マニュフェストファイル自身の拡張子は指定されていません。
慣習的に.appcache等と指定する場合があります。
既に非推奨の機能なので、ここで実例を試すことはしませんが、後日、何か検証が必要な場面がでてきたら追記するかもしれません。