Web ベースのアプリケーションにとって、オフライン アクセスの重要性はますます高まっています。すべてのブラウザにはキャッシュ メカニズムが備わっていますが、信頼性が低く、常に期待どおりに動作するとは限りません。 HTML5 は、ApplicationCache インターフェイスを使用して、オフラインによって引き起こされる問題のいくつかを解決します。
キャッシュ インターフェイスを使用すると、アプリケーションに次の 3 つの利点がもたらされます。
アプリケーション キャッシュ (AppCache とも呼ばれる) を使用すると、開発者は、オフライン ユーザーがアクセスできるようにブラウザでどのファイルをキャッシュするかを指定できます。ユーザーがオフライン中に更新ボタンを押した場合でも、アプリは正常に読み込まれて実行されます。
参照マニフェストファイルアプリのアプリ キャッシュを有効にするには、マニフェスト属性をドキュメントの HTML タグに追加します。
マニフェスト属性は絶対 URL または相対パスを指すことができますが、絶対 URL は対応する Web アプリケーションと同じオリジンを持つ必要があります。マニフェスト ファイルには任意のファイル拡張子を使用できますが、正しい MIME タイプで提供する必要があります (下記を参照)。
<html マニフェスト=/cache.manifest> ...</html>
または
<html マニフェスト=http://www.example.com/example.mf> ...</html>
キャッシュする Web アプリケーションのすべてのページに、manifest 属性を追加する必要があります。 Web ページにマニフェスト属性が含まれていない場合、ブラウザはそのページをキャッシュしません (属性がマニフェスト ファイルに明示的にリストされている場合を除く)。
これは、ユーザーが閲覧するマニフェストを含むすべての Web ページが暗黙的にアプリケーション キャッシュに追加されることを意味します。したがって、在庫内のすべてのページをリストする必要はありません。
マニフェスト ファイルは text/cache-manifest MIME タイプとして指定する必要があります。ファイル接尾辞名はカスタマイズできるため (.manifest が推奨されます)、サーバー側で .manifest 接尾辞を持つファイル タイプを text/cache-manifest として宣言する必要があります。
Apache を例に挙げると、AddType text/cache-manifest .manifest を httpd.conf に追加する必要があります。
マニフェストファイルの構造単純なリスト形式は次のとおりです。
キャッシュマニフェストindex.htmlstylesheet.cssimages/logo.pngscripts/main.js
この例では、このマニフェスト ファイルを指定する Web ページ上の 4 つのファイルをキャッシュします。
次の点に注意する必要があります。
より複雑な例を見てみましょう。
CACHE MANIFEST# 2010-06-18:v2# 明示的にキャッシュされた「マスター エントリ」。CACHE:/favicon.icoindex.htmlstylesheet.cssimages/logo.pngscripts/main.js# ユーザーがオンラインである必要があるリソース。NETWORK:login。 php/myapihttp://api.twitter.com# main.py にアクセスできない場合は static.html が提供されます# offline.jpg が提供されますimage/large/# offline.html 内のすべての画像の代わりに提供されます。他のすべての .html ファイルの代わりに提供されますFALLBACK:/main.py /static.htmlimages/large/images/offline.jpg*.html /offline.html
# で始まる行はコメント行ですが、他の目的にも使用できます。たとえば、キャッシュを更新します。
アプリのキャッシュは、マニフェスト ファイルが変更された場合にのみ更新されます。たとえば、画像リソースを変更したり、JavaScript 関数を変更したりしても、それらの変更は再キャッシュされません。ブラウザがキャッシュ ファイルを更新できるようにするには、マニフェスト ファイル自体を変更する必要があります。生成されたバージョン番号、ファイル ハッシュ、またはタイムスタンプを含むコメント行を作成すると、ユーザーはソフトウェアの最新バージョンを確実に入手できます。
「キャッシュの更新」セクションで説明されているように、新しいバージョンが利用可能になったときに、プログラムでキャッシュを更新することもできます。
ページにキャッシュ マニフェスト ファイルが導入されている場合、マニフェスト ファイルには現在のページで必要なすべてのファイル (css、js、画像など) が含まれている必要があります。そうでない場合、マニフェスト ファイルはロードされないため、キャッシュする必要があるファイルは除きます。他のすべてのファイルを示すには、ファイルに NETWORK を追加することをお勧めします。
マニフェストには、CACHE、NETWORK、FALLBACK の 3 つの異なるセクションを含めることができます。
キャッシュ：これはエントリのデフォルトの部分です。このヘッダーの下にリストされているファイル (または CACHE MANIFEST の直後のファイル) は、最初にダウンロードされた後、明示的にキャッシュされます。
ネットワーク：このセクションにリストされているファイルは、サーバーへの接続に必要なホワイトリストに登録されたリソースです。これらのリソースに対するすべてのリクエストは、ユーザーがオフラインであるかどうかに関係なく、キャッシュをバイパスします。ワイルドカードを使用できます。
後退する：このセクションはオプションであり、リソースにアクセスできない場合のフォールバック ページを指定します。最初の URI はリソースを表し、2 番目の URI はバッキング ページを表します。 2 つの URI は関連している必要があり、マニフェスト ファイルと同じオリジンを持つ必要があります。ワイルドカードを使用できます。
注: セクションは任意の順序で配置でき、各セクションは同じリスト内に繰り返し表示できます。
次のリストは、ユーザーがオフラインでサイトのルートにアクセスしようとしたときに表示される包括的な Web ページ (offline.html) を定義します。また、他のすべてのリソース (リモート サイト上のリソースなど) にはインターネット接続が必要であることも示します。
CACHE MANIFEST# 2010-06-18:v3# 明示的にキャッシュされたエントリindex.htmlcss/style.css# ユーザーがオフラインの場合は、offline.html が表示されますFALLBACK:/// /offline.html# 他のすべてのリソース (サイトなど) には、ユーザーをオンラインにする。NETWORK:*# 追加リソースをキャッシュに追加CACHE:images/logo1.pngimages/logo2.pngimages/logo3.png
注意: マニフェスト ファイルを参照する HTML ファイルは自動的にキャッシュされます。したがって、リストに追加する必要はありませんが、追加することをお勧めします。
注: SSL 経由で提供されるページに設定されている HTTP キャッシュ ヘッダーとキャッシュ制限は、キャッシュ マニフェストに置き換えられます。したがって、https 経由で提供される Web ページはオフラインで実行できます。
キャッシュを更新する次のいずれかの条件が発生しない限り、アプリはオフラインでもキャッシュされたままになります。
以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。