HTML5のウエブアプリケーション
|
HTML5では、インターネットに接続していないオフラインの状態でも、 ユーザーがアプリケーションを利用できるようにするための、 キャッシュマニフェストと呼ばれる仕様の追加があります。
|
|
この基本的な仕組みは、ユーザーがインターネットに接続してウェブを利用した際に、 HTMLファイル・CSSファイル・JavaScriptファイル・画像ファイル…などの ウェブの利用に必要となるファイルをユーザーのローカル環境にダウンロード保存して、次回からはオフラインでもウェブアプリケーションを利用できるようにするというものです。
|
|
この仕組みでサーバー上のファイルをローカル環境に保存することをキャッシュといいますが、 ウェブアプリケーションをオフラインで利用する際には、どのファイルをキャッシュするかの定義をキャッシュマニフェストでおこないます。
|
|
ただし、現仕様では、キャッシュマニフェストの一覧をすべて１回で、キャッシュすることを前提としてるため、一部分のファイルのみ更新（UPDATE）することはできません。
|
マニフェストファイルの作成ルール
| １．文字コードをUTF-8にして保存する |
| ２．1行目にCACHE MANIFESTと記述する |
| ３．ナンバーサイン( # )で始まる行はコメントとなる |
| ４．セクションを分けて、キャッシュするファイル・キャッシュしないファイル・代替ファイルを、それぞれのセクションに改行区切りで記述する |
マニフェストファイルのサンプル |
| CACHE MANIFEST |
| #V1.0 2019/05/06 |
| CACHE: |
| index.html |
| cs/style.css |
| img/logo.png |
| js/main.js |
|
| NETWORK: |
| counter.php |
| FALLBACK: |
| err.html |
マニフェストファイルはMIMEタイプをtext/cache-manifestにする
| AddType text/cache-manifest .manifest |
オフライン ウェブ アプリケーションのメソッド・属性
| この機能は廃止予定となりました、ウェブ開発者は代替策として Service Worker を学ぶことをお勧めします。 |
| JavaScriptでキャッシュを扱う仕様として、以下のメソッド・属性が用意されています。 |
| アプリケーションキャッシュの制御 Application cache API |
| cache = window.applicationCache …… （windowの）ApplicationCacheオブジェクトを返す |
| cache = self.applicationCache ……… （shared workerの）ApplicationCacheオブジェクトを返す |
| cache.status …………………………… アプリケーションキャッシュの現在の状態を返す |
| cache.update() ………………………… キャッシュのダウンロードを実行する |
| cache.swapCache() ……………………… 最新のキャッシュに差し替える |
| window.navigator.onLine ……………… ユーザーエージェントがオンラインかどうかを返す（true・false） |
↑ PAGE TOP
