web-dev-qa-db-ja.com

シングルページアプリでのブラウザーキャッシュの処理

シングルページアプリのWebブラウザーキャッシュを適切に処理する方法を理解しようとしています。

私はかなり典型的なデザインを持っています。SPAを実装するいくつかのHTML、JS、CSSファイル、およびSPAによって消費される一連のJSONデータです。更新をプッシュしたいときに問題が発生します：サイトの静的部分とJSONを生成するコードを同時に更新しますが、クライアントブラウザーは静的部分をキャッシュすることが多いため、古いコードが新しいデータを処理しようとし、 （行われた変更に応じて）問題が発生する可能性があります。 （特に、IEは、ChromeまたはFirefoxを再検証せずにキャッシュされたJSを使用することよりも積極的です。）

これを処理する最良の方法は何ですか？

  1. JSONの変更に下位互換性があることを確認し、ブラウザのキャッシュが妥当な期間内に期限切れになると想定します。
  2. 静的JSとJSONの両方に何らかのバージョン番号を埋め込んで、一致しない場合はwindow.location.reload(true);を実行します。
  3. ヘッダーの適切な組み合わせを見つけます（must-revalidateまたはno-cacheまたは何でも。 sourcesvary （これを行う方法について））、サイトをロードするために数回の追加のラウンドトリップを意味する場合でも、ブラウザがすべてのロードで常にすべてのリソースを再検証することを保証します。
  4. 更新をプッシュしたいときに静的コンテンツが期限切れになるように、キャッシュコントロールと期限切れヘッダーをマイクロ管理します。
  5. 他に何か？
javascriptweb-applicationscaching
30
Josh Kelley

キャッシュ無効化ソリューションが必要です。キャッシュ無効化の役割は次のとおりです。

  1. リソースの内容に応じて、リソースの名前を一意の名前に変更します。
  2. それらのリソースへのすべての参照を更新します。

Gruntベースのプロジェクトでは、更新する必要があるすべてのファイルに、その内容に基づいて一意の名前が付けられるようにするために grunt-rev を使用するのが一般的です。

JSONファイルがJavascriptでそれらへの参照とともにキャッシュ無効化ファイル名を確実に取得する場合、クライアントは常にJavaScriptが予期するJSONファイルをロードします。

ハッシュベースのファイル命名の利点は、変更されていないファイルがキャッシュ無効化後に同じファイル名を取得するため、ブラウザーは変更されていない場合でもキャッシュされたコンテンツを安全に使用し続けることができることです。

明らかに、これはプロジェクトのプロダクションビルドの一部として自動化したい種類なので、ファイル名と参照の変更を手動で追跡する必要はありません。

14
Ted Percival

if-modified-since + last-modifiedヘッダーまたはif-none-match + etagヘッダーを適切なcache-controlヘッダーと共に使用できます。 （ ブラウザのバグ が存在する可能性がありますが、最近のブラウザでは管理できないものはありません。）

ファイルが静的な場合は、if-modified-sinceを使用することをお勧めします。適切に構成されたHTTPサーバーで自動的に実行できるためです。最後のダウンロード以降にファイルが変更されていない場合は、304を返信する必要があります。

あなたの＃1と＃2が長期的に機能するとは思いません。 ＃3または＃4が機能します。 ＃3の方が簡単ですが、この問題への対処方法を一度だけ習得する必要があります。だから私があなたなら＃4を試してみますが、解決策は顧客が使用しているブラウザに依存するかもしれません...たとえばIE8はajaxキャッシュを更新するなどの問題を抱えています...

5
inf3rno

JavaサーブレットフィルターをSPAに含めることができる場合、これが実際の解決策です： CorrectBrowserCacheHandlerFilter.Java

基本的に、ブラウザーが静的ファイルを要求すると、サーバーはすべての要求を同じ要求にリダイレクトしますが、ターゲットの静的ファイルのコンテンツに依存するハッシュクエリパラメーター（たとえば、_?v=azErT_）を使用します。

これを行うと、ブラウザは_index.html_で宣言された静的ファイルをキャッシュすることは決してありません（常に_302 Moved Temporarily_を受け取るため）、ハッシュバージョンのファイルのみをキャッシュします（サーバーは_200_それらのために）。そのため、ブラウザのキャッシュは、ハッシュバージョンの静的ファイルに対して効率的に使用されます。

免責事項：私は_CorrectBrowserCacheHandlerFilter.Java_の作成者です。

2
Anthony O.