HTML5のオフラインキャッシュ

オフラインストレージ。でも、オフラインの場合には、ユーザーは通常、それらのファイルを使用できるように、我々は、オフラインカラム構成マニフェストファイルのローカルで文書を保存することができます。

まず、ページヘッダを追加する必要があるmanifestプロパティを:

<!DOCTYPE HTML> 
<htmlのマニフェスト= "cache.manifest"> 
...
 </ HTML>

cache.manifestこのように、スタイルファイルを書きます:

CACHE MANIFEST 
#v0を。11 

CACHE:

JS /app.js 
CSS / style.cssとの
NETWORK:
リソース教材 /logo.png
 
FALLBACK: / /offline.html

オフラインストレージマニフェストは、典型的には、3つの部分から構成します:

CACHE:マニフェストファイルが含まれているページが自動的にオフラインで保存されますので、オフラインストレージのために必要なリソースのリストを表し、そのページ自体にも記載されて入れないでください。
NETWORK:それは以下のリソースがオンラインでのみの場合にアクセスすることができ表し、彼らはあなたがオフラインの状況でこれらのリソースを使用することはできません、オフラインで保存されることはありません。同じCACHEと、ネットワーク内のリソースがある場合は、その後、リソースはまだ高いCACHEの優先順位を意味し、オフラインで保存されます。
FALLBACK:アクセスが失敗した場合、その後、彼は、このようなファイルの先頭には、任意のリソースのルートディレクトリへのアクセスが失敗した場合、その後、offline.html訪問に行ったことが示されたのと、2番目のリソースを使用置き換え、最初のリソースを表します。

ブラウザは、リソースをオフラインで管理し、それをロードする方法ですか?これは、2つの場合に議論する必要があります。

1の下では、オンライン、ブラウザのHTMLヘッドがマニフェストの属性を発見した、それが最初の訪問アプリであれば、ブラウザはマニフェストファイルとオフラインストレージの内容に基づいて適切なリソースをダウンロードし、マニフェストファイルを要求します。アプリを訪問したとオフライン資源が格納されている場合は、ブラウザがオフラインのリソースページの読み込みを使用しますが、ブラウザは、ファイルが変更されていない場合は、何もしない、新しいマニフェストファイルマニフェストファイルで古いと比較しますファイルが変更されている場合は、ファイルのリソースとオフラインストレージを再ダウンロードします。

2オフラインの下では、ブラウザがオフラインのストレージ・リソースの使用を指示します。

このプロセスで注意を必要とするいくつかの問題があります。

1サーバーのオフラインリソースが更新された場合は、あなただけのマニフェストファイル、ブラウザはありません再ダウンロードリソースを更新せずにリソースを更新する場合は、再ダウンロードしたブラウザであるために、これらのリソースにマニフェストファイルを更新する必要があり、すなわちまたは、元のオフラインのストレージ・リソースを使用します。

2マニフェストファイルに更新されている場合があるかもしれませんので、ときマニフェストファイルのキャッシングについて非常に注意する必要がありますが、HTTPルールをキャッシュすることは有効期限が切れていないブラウザのローカルキャッシュマニフェストファイル、ブラウザまたはこのケースを伝えますそれはキャッシュマニフェストファイルを設定するのが最善ではありませんので、オリジナルのマニフェストファイルを使用します。

マニフェストファイルのダウンロード時間が3つのブラウザのリソースのダウンロードに失敗したいくつかの理由であれば、それはブラウザがまだ元を使用しますが、失敗しても、更新のすべて、その後、リソースをすべてのリソースをダウンロードします資源。

4リソース、効果にあなたがアプリを開く次の時間、必要なリソースをただちに有効にすることができた場合、あなたが使用することができます取るために必要な新しいリソースアップデートした後window.applicationCache.swapCache()、それ効果的な方法にする理由は、このような現象は、ブラウザが最初に使用するということですオフラインページをロードし、リソース、およびその後、マニフェスト更新プログラムを確認しに行くので、あなたがページを開く次の時間を有効にする必要があります。

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

オリジナル:https://www.cnblogs.com/shoestrong/p/6435169.html

おすすめ

転載: www.cnblogs.com/xjy20170907/p/11609391.html