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


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

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

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

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

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

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

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

ブラウザのサポート

Internet Explorer

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

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

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

インスタンス

<!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="logo.png" width="336" height="69"></p>
<p>尝试打开 <a href="#" target="_blank">这个页面</a>, 在离线的状态下重新载入这个页面，页面也可以访问。</p>
</body>
</html>

インスタンスの実行»

「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します

キャッシュマニフェストの基本

アプリケーションキャッシュを有効にするには、ドキュメントを確認してください。 html> タグにはマニフェスト属性が含まれています:

<!DOCTYPE HTML>
<html マニフェスト="demo.appcache">
...
</html>

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

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

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

マニフェスト ファイル

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

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

  • キャッシュ マニフェスト - この見出しの下にリストされているファイルは最初のダウンロード後にキャッシュされます

  • ネットワーク - この見出しの下にリストされているファイルはサーバーへの接続が必要ですキャッシュされずに

  • FALLBACK - この見出しの下にリストされているファイルは、ページに到達できない場合 (404 ページなど) のフォールバック ページを指定します

CACHE MANIFEST

最初の OK、CACHE MANIFEST が必要です:

キャッシュマニフェスト
/theme.css
/logo.gif
/main.js

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

NETWORK

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

NETWORK:
login.php

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

NETWORK:
*

FALLBACK

次の FALLBACK サブセクションでは、インターネット接続を確立できない場合、/html5/ ディレクトリ内のすべてのファイルが "offline.html" に置き換えられることを指定します。

FALLBACK:
/html/ /offline.html

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

キャッシュを更新する

アプリがキャッシュされると、次のことが起こるまでキャッシュされたままになります:

  • ユーザーがブラウザのキャッシュをクリアする

  • マニフェストファイルが変更される(以下のヒントを参照)

  • 更新手順によるアプリケーションキャッシュ

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

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

NETWORK:
login.php

フォールバック:
/html/ /offline.html

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

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

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

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

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