マニフェストの使用/作成、appCacheイベント/エラーの処理、swapCacheの使用方法

StackOverflow https://stackoverflow.com//questions/20045643

質問

マニフェストファイル（構造体）をどのように使用して作成しますか,

appCacheイベントとエラーの処理,

そして、swapCacheが必要なのはいつですか？

役に立ちましたか？

解決

マニフェストでアプリケーションキャッシュを使用する

アプリケーションキャッシュを使用するには、次のようにHTMLドキュメント内のマニフェストファイルを参照する必要があります:

<html manifest="manifest.appcache"/>

マニフェストファイル自体が機能するには、所定のレイアウトが必要です。

CACHE MANIFEST は必須であり、一番上にある必要があります（ブラウザがキャッシュマニフェストであるかどうかをチェックすると、trueを返します）。

CACHE オプションですが、推奨され、ローカルにキャッシュするファイルを参照するために使用されます。

FALLBACK は省略可能で、指定されたファイル(in)が指定された場合に使用されるファイルを指定するために使用されます。 CAHCE）は利用できません。最初に指定されたファイル( FALLBACK)は元のファイルであり、2番目のファイルは元のファイルが使用できない場合に使用されるファイルです。

NETWORK 必須であると見なされるべきですが、そうではありません。これは、インターネット接続が必要なファイルを指定するために使用されます（キャッシュされません）。(括弧なしで)"*"を使用すると、以下に記載されているものを除く他のすべてのファイルが指定されます CACHE, 、アクティブなインターネット接続が必要です。

例を示します。:

CACHE MANIFEST

CACHE:
YourFirstFile.html
YourSecondFile.png
fallbackFile1.html
fallbackFile2.png
Etc.css

FALLBACK:
YourFirstFile.html fallbackFile1.html
YourSecondFile.png fallbackFile2.png

NETWORK:
*

マニフェスト（およびその指定されたリソース）は、ページの読み込み時（ユーザーがサイトに入ったとき）にのみチェックされます。サイドノート:マニフェストファイル は 大文字と小文字が区別されます。

アプリケーションキャッシュでトリガーされたイベントの処理

私が最初に言いたいのは appCache 本当にです window.applicationCache, 、宣言する必要があります（var appCache = window.applicationCache;).

ユーザーが初めてサイトに入ると(またはマニフェストキャッシュが存在しない場合)、次のイベントがトリガーされます;すべてが正常に機能する場合:

マニフェストを使用したアプリケーションキャッシュの作成

アプリケーションキャッシュのチェック

アプリケーションキャッシュのダウンロード

アプリケーションキャッシュの進行状況(0のX)

アプリケーションキャッシュキャッシュ

それを分解しましょう。

最初の(Creating Application Cache)ブラウザが後で使用するキャッシュ"ファイル/フォルダ"を指定します。

第二(Application Cache Checking) "checking"、マニフェストファイル内を調べて、キャッシュする必要があるものを確認します。

第三(Application Cache Downloading) "downloading"、マニフェストで指定されたファイルのダウンロードプロセスを開始します。

第四(Application Cache Progress) "progress"、ダウンロードの進行状況を追跡します（これはファイルごとにトリガーされます）。

第五回（Application Cache Cached) "cached"、単にファイルをキャッシュする"私は終わった"と言うと、すべてが必要に応じて行きました。

これはどういう意味ですか？これは、イベントをある程度制御でき、必要に応じて独自のイベントをトリガーできることを意味します。

だから聞くことによって progress イベント、我々は、プログレスバー、ステップまたは本当に私たちが望むもので通知を表示することができます。

appCache.addEventListener("progress", function(event) {
    console.log(event.loaded + " of " + event.total);
}, false);

待って、私はちょうど何をしましたか？

私は追加しました event listener と .この関数の中で、私たちが聞いているものから「イベント」を渡します（downloading）、および単に logged これまでにキャッシュされたファイルの数と、合計でキャッシュされたファイルの数。

最初に呼び出されたイベントから最後に呼び出されたイベントまで、言及されたすべてのイベントでこれを行いましょう:

appCache.addEventListener("checking", function(event) {
    console.log("Checking for updates.");
}, false);


appCache.addEventListener("downloading", function(event) {
    console.log("Started Download.");
}, false);


appCache.addEventListener("progress", function(event) {
    console.log(event.loaded + " of " + event.total + " downloaded.");
}, false);

appCache.addEventListener("cached", function(event) {
    console.log("Done.");
}, false);

今、これらのイベントは私が彼らにしたいことをします。

これらはappCacheイベントです:

checking -常に最初のイベントがトリガーされます。マニフェストの更新をチェックします。

downloading -更新が見つかったときにトリガーされます。マニフェストで指定されたリソースをダウンロードします。

progress -現在ダウンロードしているリソースごとにトリガーされます。進行状況を追跡します（ファイル別）。

error -404、410ネットワークエラーが発生した場合、またはダウンロード中にマニフェストファイルが変更された場合にトリガーされます。

obsolete -404、410ネットワークエラーが発生した場合、またはマニフェストファイルが（サーバー上に）存在しない場合にトリガーされます。このイベントは、以前の(および現在の)アプリケーションキャッシュを削除することに注意してください。

cached -(のみ)マニフェストで指定されたリソースが最初にキャッシュされたときにトリガーされます。

noupdate -最後のキャッシュ更新以降にマニフェストに変更が加えられていない場合にトリガーされます。

updateready -新しいリソースがダウンロードされた場合にトリガーされます。

シナリオ処理(エラー、イベント、トリガー)

何かがうまくいかない場合はどうなりますか？私たちはそれを扱うことができます error および/または obsolete.

error 更新中に何か問題が発生したときにトリガーされます。

例えば、

  • マニフェストで指定されたファイルがサーバー上に存在しません。
  • ダウンロード中にマニフェストが変更されます。

obsolete マニフェストファイルが（サーバー上に）存在しない場合にトリガーされます。

例えば、

  • マニフェストファイルがサーバーから削除されます。
  • ウェブサイトが無効なurl/パスを指している(<html manifest="manifest.appcache"/>).

聞くことによって error, 、たとえば、何か問題が発生した場合にユーザーに伝えることができます:

appCache.addEventListener("error", function(event) {
    if (navigator.onLine == true) { //If the user is connected to the internet.
        alert("Error - Please contact the website administrator if this problem consists.");
    } else {
        alert("You aren't connected to the internet. Some things might not be available.");
    }
}, false);

ここでは、ユーザーがアクティブなインターネット接続を持っているかどうかを確認しました。これは単なる例であり、ユーザーに必要ではない可能性があることを伝えることに注意してください（webサイトによって異なります）。

私たちは同じことをすることができます obsolete, 、しかし、これはサーバー側の問題であるため、ユーザーにそれについて伝えたくない場合があります:

appCache.addEventListener("obsolete", function(event) {
    console.log("Obsolete - no resources are cached, and previous cache(s) are now deleted.");
}, false);

スワップキャッシュ

今、これはトリッキーなものです。についての主な質問 swapCache は;"それは何をするのですか？"、"それは便利ですか/必要ですか？「そして」それを使うべきですか？".

swapCache 古いキャッシュを新しいキャッシュに置き換えるために使用されます。それはの中でだけ使用することができます updateready イベント(他の場所で使用されている場合は、エラーをスローバックします)。

"それは何をするのですか？":swapCacheはそれが言うことを行い、現在のキャッシュを新しいキャッシュと交換します。

"それは便利ですか/必要ですか？":appCacheは便利ですが、それを使用する主な理由は、利用可能な最も新しいキャッシュが使用されていることを確認することです。Althoこれはそれ自体で動作するはずのもののように思えますが、必ずしもそうではありません。たとえば、一部のブラウザでは、必要なメッセージが表示されていないため、常に最新のキャッシュを使用するとは限りません（iPhoneが良い例です）。イメージはキャッシュされ、削除/名前変更され、キャッシュされるなどのことがあります。最後に、ブラウザは、保存されたキャッシュで既に参照されているため、古いキャッシュを使用してその画像を表示することがあります。ボトムライン:それは便利ですか？はい。.それは必要ですか？いいえ。.

「それを使うべきですか？":個人的に私はイエスと言うでしょう。しかし、それはあなたのページが何をするかに依存します。上記の例の基準がリソース処理と一致する場合は、はい。そうでなければ、それは本当に問題ではありません。

イベントリスナーを追加することで updateready, 、swapCacheを含めることができます:

appCache.addEventListener("updateready", function(event) {
    appCache.swapCache();
    window.reload();
}, false);

(appCache)イベント変数:

progress.
         total 
         loaded 
         lengthComputable
GENERAL (for all):
         clipboardData
         cancelBubble
         returnValue
         srcElement
         defaultPrevented
         timeStamp
         cancelable
         bubbles
         eventPhase
         currentTarget
         target
         type
         stopPropagation
         preventDefault
         initEvent
         stopImmediatePropagation

素敵な外部ページ:

http://www.html5rocks.com/en/tutorials/appcache/beginner/ -appCacheの基本。

http://www.htmlgoodies.com/html5/other/html-5-appcache-by-example.html -appCacheの例。

http://www.jefclaes.be/2012/04/visualizing-offline-application-cache.html -マニフェストのフォールバック。

SwapCache()はHTML5オフラインアプリで必要ですか？ -swapCache情報（コメントも読んでください）。

https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/http-caching -一般的なHTTPキャッシュ情報。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top