web-dev-qa-db-ja.com

AngularJsはブラウザにキャッシュをクリアさせます

私のチームは現在、迅速な更新を実行しているため、私のangularアプリケーションは常に変化しています。

キャッシュのため、クライアントは常に最新バージョンのコードを持っているとは限りません。

angularにブラウザにキャッシュをクリアさせる方法はありますか?

41
Marc Rasmussen

スクリプトファイルにハッシュを追加するという非常に簡単なソリューションを使用できます。アプリがデプロイされるたびに、gulp/gruntタスクを介して異なるハッシュでファイルを自動的に提供します。例として gulp-rev を使用できます。私はすべてのプロジェクトでこの手法を使用し、正常に動作します。ビルド/デプロイプロセスで自動化されたこの方法は、すべてのプロジェクトのソリューションになります。

AngularJSのYeomanジェネレーター generator-gulp-angular(これは私の選択したジェネレーターでした)このソリューションを使用して、ブラウザーがキャッシュ内の古いファイルではなく、最適化された新しいファイルをロードします。デモプロジェクトを作成し、それを試してみてください。実際に動作します。

18
aUXcoder

上記のように、ブラウザのキャッシュの問題を解決する一般的なソリューションは、ロードされたリソースファイルに何らかのバージョントークン(バージョン番号、タイムスタンプ、ハッシュなど)を追加することです。これは、ユーザーがページをロードまたはリロードする場合を対象としています。 gulpタスク、WebPack、Asp.net MVCなどの一部のバックエンドフレームワークなどでは、この機能をバンドル、最小化、難読化などとともにサポートしています。他の関連する問題を解決するためにそれらを使用することをお勧めします。

しかし、メインページ自体を更新し、バックエンド側で変更(デプロイ)されたときにすでにファイルをロードしていることを解決できないと考える人もいます。たとえば、別のユーザーがリロードせずに単一のページで作業している間にアプリをデプロイします。または、ユーザーがブラウザタブでアプリを開いたままにして、1時間後にこのページに戻ります。この場合、メインページを含むロード済みの一部のファイルは古く、バックエンド側の一部は新しいものです。また、ロード済みのすべてのファイルには、バックエンドには存在しないがブラウザーにキャッシュされているファイルへの古い参照があります。したがって、一般的にはここでアプリケーションが壊れていますが、実際にはAngularが解決できないより一般的な問題です。

これを解決するには、新しいアプリのバージョンが存在することをユーザーに通知し、ページをリロードするか、強制的にリロードする必要があります。 2番目のアプローチは、ユーザーエクスペリエンスの観点からは良くありません。あなたが働いていて、ある時点でページ自体がリロードを開始すると想像してください。変だよね?

ユーザーに新しいバージョンを通知するには、websoketsメッセージを使用して、新しいバージョンについてアプリに送信するか、すべての応答でバージョンを渡す(良い解決策ではない)か、新しいバージョンについてバックエンドを時々プルします(あまり良くない)。しかし、それらはすべて些細なことではありません。アプリのログインセッションが短い場合は、再ログイン中にバージョンを確認したり、認証Cookieを更新したりできます。

したがって、この問題を完全に解決するには、ファイルバンドルと新しいバージョンのユーザー通知メカニズムを実装する必要があります。

11

本当にシンプルなソリューションを探していて、IDEがC#のビジュアルスタジオである場合、アプリビルドIDを取得し、jsファイルのURLで連結できます。

まず、次のようなマイナーバージョンの増分を有効にする必要があります。 enter image description here

プロジェクトのプロパティに移動し、新しいウィンドウの[アプリケーション]で[アセンブリ情報]をクリックして、アセンブリバージョンに「*」を追加します(上の図で説明した最後の桁)。

その後、aspxを使用しているこのコードに対して、aspx、webサービス、webapiなどのコードビハインドに新しいプロパティを追加します。

    public string GetVersionApp => System.Reflection.Assembly.GetExecutingAssembly().GetName().Version.ToString();

次に、htmlを介してプロパティを呼び出し、次のように、値をurlファイルのparamとして連結します。

<script type="text/javascript" src="App/RequestsList/directives/comment-directive.js?<%=GetVersionApp%>"></script>

このソリューションでは、新しいビルドが発生した場合にのみファイルがリロードされます。

1
Leandro Alves