English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
HTMLを使用して5、キャッシュ マニフェストファイルを作成することで、ウェブアプリケーションのオフラインバージョンを作成しやすくなります。アプリケーションキャッシュを導入することで、ウェブアプリケーションはクライアント側でキャッシュされ、ネットワーク接続がない場合でもオフラインアクセスが可能になります。
HTML5 アプリケーションキャッシュメカニズムを提供し、ウェブアプリケーションがオフラインで実行できるようにします。開発者はApplication Cache (AppCache) インターフェースを使用して、ブラウザがキャッシュすべきリソースを設定し、オフラインユーザーに利用可能にします。オフライン状態であれば、ユーザーがリフレッシュボタンをクリックしても、アプリケーションは正常に読み込まれ、動作します。
アプリケーションキャッシュはアプリケーションに3つの利点をもたらします:
オフラインブラウジング - ユーザーはアプリケーションがオフラインのときにそれらを使用できます
速度 - キャッシュされたリソースはより速く読み込まれます
サーバーロードの軽減 - ブラウザは、更新されたり変更されたりしたリソースのみをサーバーからダウンロードします。
Internet Explorer 10, Firefox、Chrome、Safari、Operaはアプリケーションキャッシュをサポートしています。
以下の例は、キャッシュ マニフェストを持つHTMLドキュメント(オフラインで閲覧用)を示しています:
<!DOCTYPE HTML> <html manifest="demo.appcache"> <body> ドキュメントの内容...... </body> </html>テストを見てみましょう ‹/›
アプリケーションキャッシュを有効にするには、ドキュメントの<html>タグにmanifest属性を含めます:
<!DOCTYPE HTML>
<html manifest="demo.appcache">
...
</html>
manifestを指定したすべてのページは、ユーザーがアクセスしたときにキャッシュされます。manifest属性が指定されていない場合、ページはキャッシュされません(manifestファイルで直接指定されていない場合を除きます)。
manifestファイルの推奨のファイル拡張子は「.appcache」です。
manifestファイルは正しいMIMEを設定する必要がありますので、ご注意ください。-type、つまり「text」/cache-manifest"。ウェブサーバー上で設定する必要があります。
manifestファイルはシンプルなテキストファイルで、ブラウザにキャッシュされる内容(およびキャッシュされない内容)を教えます。
manifestファイルは3つの部分に分けられます:
CACHE MANIFEST - この見出しの下に記載されたファイルは、初めてダウンロードされた後、キャッシュされます
NETWORK - この見出しの下に記載されたファイルは、サーバーとの接続が必要で、キャッシュされません
FALLBACK - この見出しの下に記載されたファイルは、ページがアクセスできない場合のリカバリーページ(例えば 404 ページ)
CACHE MANIFEST
最初の行、CACHE MANIFEST、必須です:
CACHE MANIFEST /style.css /logo.png /main.js
上記のmanifestファイルには3つのリソースが含まれています:CSSファイル、GIF画像、JavaScriptファイルです。manifestファイルが読み込まれた後、ブラウザはウェブサイトのルートディレクトリからこれらのファイルをダウンロードします。それから、ユーザーがいつでもネットワークと接続が切れると、これらのリソースも利用できます。
NETWORK
以下のNETWORKセクションでは、ファイル「login.php」が常にキャッシュされず、オフライン時には使用できないように指定されています:
NETWORK: login.php
すべての他のリソースを指すために星号を使用できます/ファイルはすべてネットワーク接続が必要です:
NETWORK: *FALLBACK
以下のFALLBACKセクションでは、ネットワーク接続が確立できない場合に「offline.html」を使用して代替します /html5/ ディレクトリ内のすべてのファイル:
FALLBACK: /html/ /index.html
注意: 第一个 URI はリソース、二つ目は代替です。
アプリケーションがキャッシュされると、以下のいずれかの状況が発生するまでキャッシュを保持します:
ユーザーがブラウザのキャッシュをクリアします
manifestファイルが変更されました(以下のヒントを参照してください)
アプリケーションキャッシュの更新をプログラムで行います
CACHE MANIFEST # 2018-02-21 v1.1.1 /style.css /logo.png /main.js NETWORK: login.php FALLBACK: /html/ /index.html
ヒント:「#」で始まるのはコメント行ですが、他の用途にも使用できます。アプリケーションのキャッシュはmanifestファイルが変更された際に更新されます。画像を編集したり、JavaScript関数を修正した場合、これらの変更は再キャッシュされません。コメント行の日付とバージョン番号を更新することで、ブラウザがファイルを再キャッシュする方法の1つです。
キャッシュの内容に注意してください。
ファイルがキャッシュされると、ブラウザはサーバー上のファイルが変更された場合でもキャッシュされたバージョンを表示し続けます。ブラウザのキャッシュを更新するには、manifestファイルを更新する必要があります。
注意: ブラウザがキャッシュデータの容量制限が異なる可能性があります(一部のブラウザでは、各サイトごとの設定制限があります)。 5MB)。