HTML5 Application Cache でサイトの読み込みが早くなる

HTML5 Application Cache でサイトの読み込みが早くなる

2019.05.22

このフィーチャーはSafariChromeFirefoxのみで使用できます。 IE9はまだ対応していません。アプリケーションキャッシュ(AppCache)はアプリのデータ(UI)を記憶装置します。

例えば、画像、アイコン、音ファイルなどです。

ユーザーが次回にアプリを使用するとき、アプリがすぐ使える状態です。アプリケーションキャッシュはブラウザキャッシュとの違いがアプリケーションキャッシュの方がデータを長期間で保持します。そして、ブラウザキャッシュのように簡単削除されません。例えば、ブラウザキャッシングの場合はユーザーが大きいファイルをダウンロードして、他の保持されたキャッシングが削除される可能性があります。それにアプリケーションキャッシュはファイルをキャッシュするか、キャッシュしたいファイルも決められます。

CACHECPUのバスやネットワークなど様々な情報伝達経路において、ある領域から他の領域へ情報を転送する際、その転送遅延を極力隠蔽し転送効率を向上するために考案された記憶階層の実現手段である。実装するシステムに応じてハードウェア・ソフトウェア双方の形態がある(今後コンピュータのプログラムなども含め全ての転送すべき情報をデータと表す)。

アプリケーションキャッシュを使用するWebページには、以下のHTMLページがあります。
<
DOCTYPE html>
<html manifest = “web.appcache”>

</html>

Manifest 属性のhtmlタグはファイルを指して、ブラウザがキャッシュするために、リソースをダウンロードします。Manifestファイルは下記にご参照ください。

キャッシュマニフェスト
images / favicon.ico
images / logo.png

CACHE
index.html
styles / application.css
scripts / jquery.js

ネットワーク:
/ service / resource
*

フォールバック:
images / large / images / offline.jpg
上記のファイルのマニフェストファイルは3つの部分で構成されています。

CACHE:この行の下にあるもの、またはどのカテゴリにも含まれないものはすべてブラウザがダウンロードし、ファイルが変更されるまで再度ダウンロードしません。再びウェブサイトをオープンする部分です。 サーバーに接続できなくても、ブラウザはレンダリングされたままになります。この部分はサーバから再度ロードする必要がないイメージ、CSS、スクリプト、またはHTMLファイルです。

ネットワーク:このブラウザの下にあるものは毎回サーバーからロードしようとします。デバイスに保存するダウンロードはありません。

FALLBACK:ロードできない場合に利用可能なリソースを指定するために、代わりに他のファイルを表示するかを指定します。