web-dev-qa-db-ja.com

AngularJSブラウザーのキャッシュの問題

おはようございます、本番環境のWebアプリケーションがあります。ユーザーは毎日更新を使用しています。更新プログラムを公開し、ユーザーがWebアプリケーションに戻ると、古いバージョンのWebアプリケーションが表示されます。彼は新しいバージョンをロードするためにブラウザを更新する必要があります。この問題を解決するにはどうすればよいですか？更新を公開するたびに（週に3〜4回）何百人ものユーザーにページを更新するように指示することはできません。

angularjscaching
20
CaTourist

簡単な解決策は、タイムスタンプまたはセッションIDを表すクエリ文字列をファイルに追加することです。

たとえば、春のアプリケーションでは、単に次を使用します：

<script src="js/angular/lib/app.js?r=<%= session.getId()%>"></script>

サーバー固有の実装でも同じソリューションを実装できます。

10
Manish Kr. Shukla

古典的なキャッシュの問題。 （Webサーバーから）別の指示がない限り、ブラウザーはファイル名に基づいてアセットをキャッシュします。したがって、同じ名前の同じスクリプト/スタイル/イメージを見ると、 4 になり、キャッシュバージョンを提供します。これを回避するにはいくつかの方法があります：

ブラウザにファイルをキャッシュしないように指示するようにWebサーバーを構成します。ユーザーは何度も同じファイルをダウンロードする必要があるため、これは明らかに非効率的です。

my-angular-code.js?x=123などのファイル名にクエリ文字列パラメーターを追加しますが、これも非効率的です。

資産をフィンガープリントします。これはRailsの Asset Pipeline documentationできちんと説明されています。これを実現するにはいくつかの方法があり、 grunt tasks と gulp tasks も利用可能です。本質的には、コンテンツが変更されたときにのみファイル名を変更するプロセスであり、ブラウザは新しいファイルと見なされます。

13
juco

HTML5を使用している場合は、 アプリケーションキャッシュ を使用できます。更新を自動的に確認し、キャッシュを更新するようユーザーに促すことができます。

使用方法に関する優れたチュートリアルを次に示します。

アプリケーションキャッシュの使用に関する初心者向けガイド

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

これをオフラインにしてみましょう （オフラインWebアプリケーション）

4
Brent Washburne

最初のステップは、現在サーバー側で何が起こっているかを理解することです。理解し、 configure Cache-ControlおよびEtag 。クエリ文字列パラメーターを使用できますが、プロキシサーバーはファイルをキャッシュできるため、 ファイルフィンガープリントが優れた手法です です。

変更できるドキュメントを設定するという考え方です（Angular=アプリがある場合、これはほとんどの場合index.html）からno-cacheそして、そのドキュメントが参照するリソースを積極的にキャッシュします。新しいビルドをリリースすると、リソースの名前がす​​べて変更され、リクエストが到着するとすべてが期待どおりに機能します。

私は grunt-rev をAngular app。で使用します。

2
Andy Gaskell

最初のステップは、タイムスタンプを取得し、タイムスタンプを.html拡張子のURLのクエリパラメータとして渡すことです。

タイムスタンプがURLに追加されるため、毎回HTMLコンテンツをロードする際に異なるルートでレンダリングされます。

例：

var date = new Date().getTime().toString();
app.config(['$stateProvider', '$urlRouterProvider',function($stateProvider, $urlRouterProvider){
}])
$stateProvider.state('app', {
    abstract: true,
    url: '/app',
    cache: false,
    templateUrl: 'views/app.html'**+'?t='+ date**
  })
.state('app.dashboard', {
    url: '/dashboard',
    cache: false,
    controller: 'DashboardCtrl as showCase',
    templateUrl: 'components/dashboard/dashboard.view.html'**+'?t=' + date** ,
  })
0
Prasanth