AngularJs強制瀏覽器清除緩存

Question

我的angular應用程序現在不斷變化，因為我們的團隊現在正在快速更新。

由於緩存，我們的客戶並不總是擁有我們代碼的最新版本。

那么有一種angular來強制瀏覽器清除緩存嗎？

Answer 1

您可以使用一個非常簡單的解決方案，包括在腳本文件中附加哈希值。 每次部署應用程序時，您都會通過gulp / grunt任務自動使用不同的哈希值來提供文件。 舉個例子，你可以使用gulp-rev 。 我在所有項目中使用這種技術並且工作正常，在構建/部署過程中自動化可以成為所有項目的解決方案。

用於AngularJS generator-gulp-angular的 Yeoman生成器 （這是我選擇的生成器）使用此解決方案來確保瀏覽器加載新的優化文件而不是緩存中的舊文件。 請創建一個演示項目並使用它，您將看到它正在運行。

Answer 2

如上所述，解決瀏覽器緩存問題的常見解決方案是向加載的資源文件添加某種版本標記（版本號，時間戳，哈希等）。 這包括用戶加載頁面或重新加載頁面的情況。 正如已經告知gulp任務，WebPack，Asp.net MVC等一些后端框架支持此功能以及捆綁，最小化，混淆等。 最好還用它們解決另一個相關問題。

但有人認為他們無法解決它正在更新主頁本身並在后端更改（部署）時加載已經存檔的文件。 例如，您部署應用程序，而其他用戶使用您的單個頁面而不重新加載它。 或者用戶在瀏覽器選項卡中打開應用程序，並在一小時內返回此頁面。 在這種情況下，一些已經加載的已經包含主頁的文件是舊的，而在后端的一些是新的。 此外，所有已加載的文件都具有對文件的舊引用，這些文件可能不存在於后端但在瀏覽器中緩存。 所以，一般來說，你已經破壞了應用程序，這實際上是Angular無法解決的更普遍的問題。

要解決此問題，您需要通知您的用戶存在新的應用程序版本，他們需要重新加載頁面或強制重新加載。 從用戶體驗的角度來看，第二種方法並不好。 讓我們假設您正在工作，並且在某個時刻頁面開始重新加載。 很奇怪，對嗎？

為了通知用戶有關新版本的信息，你可以使用websokets消息來關於新版本的應用程序，在每個響應中傳遞版本（不是一個好的解決方案）或不時拉出關於新版本的后端（也不是很好）。 但它們都不是微不足道的。 如果您的應用程序登錄會話很短，您可以在重新登錄時刷新版本，刷新身份驗證cookie等等。

因此，要完全解決這個問題，您需要實現文件捆綁+新版本用戶通知機制。

Answer 3

如果您正在尋找一個非常簡單的解決方案，並且您的IDE是C＃下的visual studio，您可以獲得app build Id並在您的js文件URL上連接。

首先，你應該為那些次要版本激活增量：

轉到項目屬性，在新窗口的Application下，單擊Assembly Information並在Assembly版本中添加“*”（如上圖所示，最后一位數字）。

之后，將新屬性添加到您的代碼隱藏的aspx，或Web服務或webapi等...對於這段代碼，我正在使用aspx：

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

然后，通過您的html調用屬性並將值作為param連接到您的url文件，如下所示：

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

使用此解決方案，只有在發生新構建時才會重新加載文件。