HTML5 アプリケーション キャッシュ
アプリケーション キャッシュとはアプリケーション キャッシュ
HTML5 ではアプリケーション キャッシュ テクノロジーが導入されており、キャッシュ マニフェスト ファイルを作成することで Web アプリケーションをキャッシュし、ネットワークなしで使用できるようになり、オフライン アプリケーションを簡単に作成できます。 。
アプリケーション キャッシュには 3 つの利点があります:
① オフライン ブラウジング
② ページの読み込み速度の向上
③ サーバーの負荷の軽減
そして、すべての主要なブラウザはアプリケーション キャッシュをサポートしており、サポートしていなくても間違いはありませんプログラムにはどのような影響がありますか?
オフライン ストレージ テクノロジー
HTML5 は、localstorage と Application Cache という 2 つの主要なオフライン ストレージ テクノロジーを提案しています。どちらにも独自のアプリケーション シナリオがあります。従来のオフライン ストレージ テクノロジーは Cookie です。
練習後、追加として、重要ではない Ajax データをローカルストレージに保存する必要があると考えています。
静的リソースの保存にはアプリケーション キャッシュが使用されますが、これは依然として追加です
小さなテキスト (4096 バイト) を保存するため、大きなデータは保存できません。これが Cookie と前述のキャッシュ テクノロジの違いの 1 つです。HTTP はステートレスであるため、サーバーはリクエストかどうかを区別するための識別文字列を必要とします。このテキストは同じサーバーから発信されており、このタスクは Cookie によって実行され、ユーザーの権限を確認するために毎回サーバーとブラウザーの間で渡されます。
つまり、Application Cache の適用シナリオが異なるため、使用方法も一貫性がありません。
アプリケーション キャッシュの概要
アプリケーション キャッシュの使用には 2 つの側面の作業が必要です:
① サーバーはマニフェスト リストを維持する必要があります
② ブラウザ上で必要なのは簡単な設定だけです
<html マニフェスト= 「demo.appcache」>
例で説明します:
CACHE MANIFEST CACHE: # 需要缓存的列表 style1.css 1.jpg 01.js http://localhost/applicationcache/02.js http://localhost/applicationcache/zepto.js NETWORK: # 不需要缓存的 4.jpg FALLBACK: # 访问缓存失败后，备用访问的资源，第一个是访问源，第二个是替换文件*.html /offline.html 2.jpg/3.jpg
まず第一に、ここでエラーを報告しました:
アプリケーション キャッシュ エラー イベント: マニフェストの取得に失敗しました (404)
このエラーの理由は次のとおりです:マニフェスト ファイルには、正しい MIME タイプ (「text/cache-manifest」) を構成する必要があります。 Web サーバー上で設定する必要があります。サーバーごとに異なります
この方法では、この時点でネットワークが切断されていても、それらのファイルには引き続きアクセスできます
注意すべき点が 1 つあります。たとえば、ここには /index.html はありません。「applicationcache/」はキャッシュされますが、これは実際にはindex.htmlです
マニフェスト ファイルは 3 つのセクションに分けることができます:
キャッシュ マニフェスト - この見出しの下にリストされているファイルは最初のダウンロード後にキャッシュされます
ネットワーク - この見出しの下にリストされているファイルはサーバーへの接続が必要であり、キャッシュされません
フォールバック - ファイルこの見出しの下にリストされているページは (404 ページなど) アクセスできない場合のフォールバック ページを指定します
キャッシュ マニフェストの基本
アプリケーション キャッシュを有効にするには、ドキュメントの <html> を確認してください。マニフェスト属性:
\APPLICATIONCACHE 01.js 02.js 1.jpg 2.jpg 3.jpg 4.jpg demo.appcache index.html style1.css style2.css web.config zepto.js
指定されたマニフェストを持つ各ページは、ユーザーがアクセスするとキャッシュされます。マニフェスト属性が指定されていない場合、ページはキャッシュされません (マニフェスト ファイルで直接指定されていない限り)。
マニフェスト ファイルの推奨ファイル拡張子は「.appcache」です。
マニフェスト ファイルは正しい MIME タイプ、つまり「text/cache-manifest」で構成する必要があることに注意してください。 Web サーバー上で設定する必要があります。
マニフェスト ファイル
マニフェスト ファイルは、何がキャッシュされているか (何がキャッシュされていないのか) をブラウザーに伝える単純なテキスト ファイルです。
マニフェスト ファイルは 3 つの部分に分けることができます:
キャッシュ マニフェスト - この見出しの下にリストされているファイルは最初のダウンロード後にキャッシュされます
ネットワーク - この見出しの下にリストされているファイルはサーバーへの接続が必要であり、キャッシュされません
フォールバック- この見出しの下にリストされているファイルは、ページにアクセスできない場合 (404 ページなど) のフォールバック ページを指定します。
CACHE MANIFEST
最初の行である CACHE MANIFEST は必須です:
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" に置き換えられることを指定しています:
フォールバック:
/html/ /offline.html
注: 最初の URI はリソースで、2 番目の URI は代替です。
キャッシュを更新する
アプリがキャッシュされると、次のことが起こるまでキャッシュされたままになります:
ユーザーがブラウザーのキャッシュをクリアする
マニフェストファイルが変更される(以下のヒントを参照)
プログラムによってアプリのキャッシュを更新する
例 - 完全なマニフェスト ファイル
CACHE MANIFEST
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js
NETWORK:
login.php
FALLBACK:
/ html / /offline.html
ヒント: 「#」で始まる行はコメント行ですが、他の目的にも使用できます。アプリケーションのキャッシュは、マニフェスト ファイルが変更されると更新されます。画像を編集したり、JavaScript 関数を変更したりしても、これらの変更は再キャッシュされません。コメント行の日付とバージョン番号を更新すると、ブラウザにファイルが再キャッシュされます。
アプリケーションキャッシュに関する注意事項
キャッシュの内容にご注意ください。
ファイルがキャッシュされると、サーバー上のファイルを変更したとしても、ブラウザにはキャッシュされたバージョンが表示され続けます。ブラウザのキャッシュを確実に更新するには、マニフェスト ファイルを更新する必要があります。
注: ブラウザーによって、キャッシュされたデータの容量制限が異なる場合があります (ブラウザーによっては、サイトごとに 5MB の制限を設定している場合があります)。
