angularjs - 刷新缓存的Angular SPA

Question

基本设置:由Apache 2.4提供的Angular 1.5 SPA由REST api支持，Apache 2.4也提供了REST API。

我已经阅读了在服务器上更改了一些应用程序代码后可以使SPA更新和更新的所有可用技术。

解决方案通过HTTP caching(HTTP header )或缓存清除(例如版本文件名)技术实现。所有这些都是基于Web浏览器发出的请求以获取资源，并具有某种机制来知道内容是否需要更新或可以从缓存中提供。

SPA的主要问题在于，由于Web应用程序很高兴在浏览器中加载，并且仅启动对后端的XHR调用才能加载数据，因此在初始加载后通常不会发出对资源的请求。在许多情况下，用户很长一段时间都没有关闭选项卡，这带来了很长时间不刷新文件的不便。

最困难的问题是index.html文件(see this post)。第一次在浏览器中加载应用程序时，只会调用一次，然后再也不会请求它。只有手动浏览器页面重新加载才能发起对该文件的第二次请求。

在请求index.html之后，将加载所有javascript和css文件，然后再也不会重新加载。只有对index.html的新请求才能刷新它们。

如果在初始加载后未发出获取index.html的请求，那么当服务器上的javascript或css文件更改时，缓存控制 header 或缓存清除策略如何允许它们刷新？

我受到此问题的两种影响:

REST API必须与Web应用程序兼容。如果我在API中引入了重大更改，并且用户未重新加载页面，则可能会触发离开数据不一致的错误。

由于html文件可以在javascript或css文件不加载的情况下重新加载，因此可以提供不兼容的html文件(例如缺少CSS类定义或范围引用)。

我发现的唯一实际解决方案是:

this answer

在每个XHR调用中检查当前已部署的版本，并检查它是否与浏览器中加载的版本

不同

但:

在大多数情况下，每个人的版本都相同时，保持所有版本(数据库，API，服务器代码，客户端代码)的版本似乎有很多开销。

这将是非常不友好的用户，有一条消息告诉您整个应用将被重新加载，并且会丢失所有未保存在后端的数据。考虑填写表格，然后按保存后，将被迫再次重新输入所有数据。

我在每个人如何处理Angular缓存时丢失了一些东西？

Answer 1

您可以使用URL查询参数来帮助您。在我们的应用程序中，我们要做的是在资源(脚本，图像)的末尾附加一个查询参数，并在下一个主要版本中对其进行更新。例子 :

<script src="angular.js?v=1.1"/>

在下一个主要版本发布后，将其更改为

<script src="angular.js?v=1.2"/>

由于UR1是新的，此更改强制Web服务器请求新文件。

大多数大型 Angular 应用程序都由 require.js备份，该文件提供了自己的配置来处理缓存问题。例子 :

require.config({
    baseUrl : 'resources/app',
    urlArgs : 'v=1.2'
});