HTML 5 アプリケーションのキャッシュ-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

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

黄舟

Dec 27, 2016 pm 02:48 PM

HTML 5 アプリケーションキャッシュ

はじめに

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

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

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

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

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

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

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

ブラウザのサポート

Internet Explorer を除くすべての主要なブラウザはアプリケーションキャッシュをサポートしています。

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

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

<!DOCTYPE HTML> <html manifest="demo.appcache"> <body> The content of the document...... </body> </html>

ログイン後にコピー

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

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

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

マニフェストファイル

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

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

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

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

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

CACHE MANIFEST

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

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

ログイン後にコピー

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

ネットワーク

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

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

ログイン後にコピー

アスタリスクを使用して、他のすべてのリソース/ファイルがインターネット接続を必要とすることを示すことができます:

NETWORK: login.asp

ログイン後にコピー

FALLBACK

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

NETWORK: *

ログイン後にコピー

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

キャッシュを更新する

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

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

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

プログラムによってアプリのキャッシュを更新する

例 - 完全なマニフェストfile

FALLBACK: /html5/ /404.html

ログイン後にコピー

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

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

キャッシュされたコンテンツにご注意ください。

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

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

上記は HTML 5 アプリケーションキャッシュの内容です。その他の関連コンテンツについては、PHP 中国語 Web サイト (www.php.cn) に注目してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。