リクエストゼロ、トラフィックなしの Web サイトを作成する HTML5 オフライン アプリケーション ソリューション_html5 チュートリアル スキル

はしがき

今日の Web アプリケーションは、現在の開発ではさらに複雑になりますが、インターネットから切断できないという致命的な欠陥があります。そのため、新しい API が追加されました。 HTML へ、

ローカル ストレージ メカニズムを使用してこの問題をうまく解決し、オフライン Web アプリケーションへの道を開きます。
ブラウザ キャッシュ内のローカル キャッシュ

コードをコピーします

コードは次のとおりです。

ローカル キャッシュは Web アプリケーション全体に対応します
ブラウザ キャッシュは 1 つの Web ページのみに対応します

どの Web ページにも Web ページ キャッシュがあります
ローカル キャッシュは、キャッシュするように指定したページのみをキャッシュします

Web ページのキャッシュは、Web サイトにどのページやリソースがキャッシュされているかがわからないため、信頼性が低く安全でもありません
ローカル キャッシュは、キャッシュされるコンテンツを制御できます

マニフェストファイル

Web アプリケーションのローカル キャッシュは、各ページのマニフェスト ファイルを通じて管理されます。マニフェストは、キャッシュする必要があるファイルとキャッシュする必要のないファイルの名前とパスが形式でリストされた単純なテキストです。リストの。

マニフェストは、各ページまたはアプリケーション全体に対して個別に指定できます。たとえば、hello.htm の設定:

コードをコピー

コードは次のとおりです:

キャッシュマニフェスト
キャッシュ:
other.html
hello.js
images/myphoto.jpg
ネットワーク:
http://LuLinniu/NotOffline
NotOffline.asp
*
フォールバック:
online.js locale.js
キャッシュ:
newhellow.html
newhellow .js

マニフェスト ファイルの最初の行は、ブラウザーにテキストの役割を伝える、つまりローカルのリソース ファイルに特定の設定を行うために CACHE MANIFEST である必要があります。キャッシュ。
実際にオフライン Web アプリケーションを同時に実行する場合は、サーバーが text/cache-manifest MIME タイプをサポートするようにサーバーを構成する必要があります。

ファイルソースファイルを指定する場合、リソースファイルは CACHE、NETWORK、FALLBACK の 3 つのカテゴリに分類できます

コードをコピー

コードは次のとおりです。

CACHE カテゴリでローカルにキャッシュする必要があるリソース ファイルを指定する場合、特定のページに対してローカルにキャッシュする必要があるリソース ファイルを指定する場合、ページ自体を CACHE カテゴリに指定する必要はありません。ページにマニフェスト ファイルがある場合、ブラウザはそのページを自動的にローカルにキャッシュします

NETWORK カテゴリは、キャッシュされないように明示的に指定されているリソース ファイルです。これらのファイルは、サーバー側のリンクを確立することによってのみアクセスできます。この例では、記録されないことを示すためにワイルドカード * が使用されています。キャッシュされません

FALLBACK カテゴリの各行は 2 つのリソース ファイルを指定します。最初のリソース ファイルはオンラインでアクセスできる場合に使用されるリソース ファイルで、2 番目のリソース ファイルはオンラインでアクセスできない場合に使用されるローカル キャッシュ ファイルです。

ブラウザとサーバー間の対話プロセス オフライン Web アプリケーションを操作する場合は、ブラウザとサーバー間の対話プロセスを理解する必要があります:

コードをコピーコードは次のとおりです:

たとえば、http://LuLingniu では、ホームページとしてindex.htmが使用され、ホームページはindex.manifestを使用し、
はindex.htmをキャッシュします。ファイル hello.js、hello.jpg 内での最初のアクセスのプロセスは次のとおりです。
ブラウザーが URL をリクエストします。
サーバーが、index.htm ホームページを返します。
ブラウザーがインデックスを解析します。 htm Web ページを作成し、ページ上のすべてのリソース ファイルを要求します
サーバーはリソース ファイル
を返します。ブラウザはマニフェスト ファイルを処理し、マニフェストにキャッシュする必要があるファイルを要求します。再度リクエストします
サーバーはキャッシュする必要があるファイルを返します。
ブラウザはローカル キャッシュを更新して保存し、ローカル キャッシュの更新を通知するイベントをトリガーします。

URL を再度開きます
URL をリクエスト
ブラウザはページがキャッシュされていることを検出したため、ローカル キャッシュ ファイル
を使用してファイルを解析します
ブラウザはマニフェスト ファイルをサーバー
とサーバーは 304 を返し、マニフェスト ファイルが変更されていないことを通知します (変更されている場合は異なります)

applicationCache オブジェクト

このオブジェクトはローカル キャッシュを表し、ローカル キャッシュが更新されたことをユーザーに通知するために使用できます。また、ローカル キャッシュを手動で更新することもできます。

ブラウザがローカル キャッシュを更新して新しいリソース ファイルをロードすると、applicationCache オブジェクトの updateready イベントがトリガーされ、ローカル キャッシュが変更されたことが通知され、ユーザーにページを手動で更新するよう求められます。
スワップキャッシュ

swapCache メソッドは、ローカル キャッシュの更新を手動で実行するために使用されます。このメソッドは、applicationCache オブジェクトの updateReady イベントがトリガーされた場合にのみ呼び出すことができます。

つまり、リソース ファイルが変更されたときに、このメソッドを使用して更新を手動でキャッシュできます。