HTML5 アプリケーションのキャッシュ

アプリケーションキャッシュとは何ですか?

HTML5 ではアプリケーションキャッシュが導入されています。これは、Web アプリケーションをキャッシュし、インターネット接続なしでアクセスできることを意味します。

アプリケーションキャッシュはアプリに 3 つの利点をもたらします:

1. オフラインブラウジング - ユーザーはオフラインでもアプリを使用できます

2. 速度 - キャッシュされたリソースの読み込みが速くなります

3. サーバー負荷の軽減 - ブラウジングサーバーは更新または変更されたリソースをサーバーからダウンロードします。

HTML5 では、キャッシュマニフェストファイルを作成することで、Web アプリケーションのオフラインバージョンを簡単に作成できます。

ブラウザのサポート

Internet Explorer 10、Firefox、Chrome、Safari、Opera はアプリケーションのキャッシュをサポートします。

HTML 5 キャッシュマニフェストの例

次の例は、キャッシュマニフェストを含む HTML ドキュメントを示しています (オフライン表示用)。

<!DOCTYPE HTML>
<htmlmanifest="demo.appcache">
...
</html>

ユーザーがアクセスすると、指定されたマニフェストを持つ各ページが表示されますキャッシュされます。マニフェスト属性が指定されていない場合、ページはキャッシュされません (マニフェストファイルで直接指定されていない限り)。

マニフェストファイルの推奨ファイル拡張子は「.appcache」です。

注意してくださいマニフェストファイルは正しい MIME タイプ、つまり「text/cache-manifest」で構成する必要があることに注意してください。 Web サーバー上で設定する必要があります。

マニフェストファイル

マニフェストファイルは、何がキャッシュされているか (何がキャッシュされていないのか) をブラウザーに伝える単純なテキストファイルです。

マニフェストファイルは 3 つの部分に分けることができます:

CACHE MANIFEST - この見出しの下にリストされているファイルは最初のダウンロード後にキャッシュされます
NETWORK - この見出しの下にリストされているファイルはサーバーへの接続が必要であり、キャッシュされません
FALLBACK - この見出しの下にリストされているファイルは、ページにアクセスできない場合 (404 ページなど) のフォールバックページを指定します

キャッシュマニフェスト

最初の行、CACHE MANIFEST は必須です:

CACHE MANIFEST
/theme.css
/logo.gif
/main.js

上記のマニフェストファイルには 3 つのリソースがリストされています: 1 つの CSS ファイル、GIF 画像、および JavaScript ファイル。マニフェストファイルが読み込まれると、ブラウザはこれら 3 つのファイルを Web サイトのルートディレクトリからダウンロードします。その後、ユーザーがインターネットから切断しても、これらのリソースは引き続き使用できます。

ネットワーク

次の NETWORK セクションは、ファイル "login.php" が決してキャッシュされず、オフラインで使用できないことを指定します:

NETWORK:
login.php

アスタリスクは、他のすべてのリソース/ファイルを示すために使用できます。インターネット接続が必要です:

NETWORK:
*

FALLBACK

次のセクションFALLBACKは、インターネット接続を確立できない場合は、「off line.html」を使用することを指定します。 " /html5/ ディレクトリ内のすべてのファイルを置き換えます:

FALLBACK:
/html/ /offline.html

注: 最初の URI はリソースで、2 番目の URI はフォールバックです。

キャッシュを更新する

アプリがキャッシュされると、次の状態になるまでキャッシュされたままになります。

ユーザーがブラウザのキャッシュをクリアする
マニフェストファイルが変更される（「ヒント」を参照）以下)
プログラムによって更新されたアプリケーションキャッシュ

例 - 完全なマニフェストファイル

CACHE MANIFEST
# 2012-02-21 v1.0.0
/theme。
/logo.gif
/main.js

NETWORK:
login.php

FALLBACK:
/html/ /offline.html

ヒント: "#" で始まる行はコメント行ですが、他の用途にも適しています。アプリケーションのキャッシュは、マニフェストファイルが変更されると更新されます。画像を編集したり、JavaScript 関数を変更したりしても、これらの変更は再キャッシュされません。コメント行の日付とバージョン番号を更新すると、ブラウザにファイルが再キャッシュされます。

アプリケーションキャッシュに関するご注意

キャッシュの内容にご注意ください。

ファイルがキャッシュされると、サーバー上のファイルを変更したとしても、ブラウザにはキャッシュされたバージョンが表示され続けます。ブラウザのキャッシュを確実に更新するには、マニフェストファイルを更新する必要があります。

注: ブラウザーによって、キャッシュされたデータの容量制限が異なる場合があります (ブラウザーによっては、サイトごとに 5MB の制限を設定している場合があります)。

学び続ける

新しいファイル

<!DOCTYPE html> <html manifest="demo_html.appcache"> <head> <meta charset="UTF-8"> <title>php中文网(php.cn)</title> </head> <body> <script src="demo_time.js"> </script> <p id="timePara"><button onclick="getDateTime()">获取日期和时间</button></p> <p><img src="http://img.taopic.com/uploads/allimg/130512/240477-130512133S924.jpg" width="336" height="69"></p> <p>尝试打开 <a href="" target="_blank">这个页面</a>, 在离线的状态下重新载入这个页面，页面也可以访问。</p> </body> </html>

提出するリセットコード

自動運転