刷新缓存的Angular SPA

Question

基本设置：由Apache api支持的Apache 2.4提供的Angular 1.5 SPA也由Apache 2.4提供。

我已经阅读了所有可用的技术，以便在服务器上更改某些应用程序代码后允许SPA更新并更新。

解决方案来自HTTP caching（HTTP标头）或缓存清除（例如版本控制文件名）技术。所有这些都基于Web浏览器提出获取资源的请求，并具有一些机制来了解内容是否需要更新或是否可以从缓存中提供。

SPA的主要问题是，在初始加载后通常不会对资源进行请求，因为Web应用程序在浏览器中加载得很快，并且只启动对后端的XHR调用来加载数据。在许多情况下，用户不会长时间关闭标签，因为长时间不刷新文件会带来不便。

最难的问题是index.html文件（see this post）。这个只在您第一次在浏览器中加载应用程序时调用，然后永远不会请求它。只有手动浏览器页面重新加载才能初始化该文件的第二个请求。

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

如果在初始加载后没有获得index.html的请求，那么缓存控制标头或缓存清除策略如何允许javascript或css文件在服务器上更改时刷新？ < / p>

我遇到了这个问题的两种方式：

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

2. 由于html文件可以在javascript或css文件没有执行时重新加载，因此可以提供不兼容的html文件（例如缺少CSS类定义或范围引用）。

我找到的唯一真正的解决方案是：

1. this answer
2. 检查每个XHR调用中当前部署的版本，并检查它是否与浏览器中加载的版本不同，

但：

1. 在绝大多数情况下，保持所有版本化版本（数据库，API，服务器代码，客户端代码）似乎需要很多开销。每个人都将使用相同的版本。
2. 这将是非常用户不友好的，有一条消息告诉整个应用程序将被重新加载并丢失未保存在后端的所有数据。考虑填写表格，按下保存后再强制重新输入所有数据。

我遗漏了每个人如何处理Angular缓存的内容？

Answer 1

您可以使用网址查询参数来帮助您。我们在应用程序中执行的操作是在资源（脚本，图像）的末尾附加查询参数，并为下一个主要版本更新它。示例：

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

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

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

此更改强制Web服务器请求新文件，因为URl是新的。

大多数大角度应用程序都由require.js备份，它提供了自己的配置来处理缓存问题。示例：

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