刷新缓存的Angular SPA

Question

基本设置:Apache 2.4提供的Angular 1.5 SPA由REST api支持,也支持Apache 2.4.

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

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

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

最难的问题是index.html文件(见本文).这个只在您第一次在浏览器中加载应用程序时调用,然后永远不会请求它.只有手动浏览器页面重新加载才能初始化此文件的第二个请求.

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

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

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

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

2. 由于html文件可以重新加载而javascript或css文件没有这样做,因此可以提供不兼容的html文件(例如缺少CSS类定义或范围引用).

我发现的唯一真正的解决方案是:

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

但:

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

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

Answer 1

您可以使用 URL 查询参数来帮助您。我们在应用程序中所做的就是在资源（脚本、图像）末尾附加一个查询参数，并为下一个主要版本更新它。例子 ：

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

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

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

此更改迫使 Web 服务器请求新文件，因为 UR1 是新的。

require.js大多数大型角度应用程序都通过提供自己的配置来处理缓存问题进行备份。例子 ：

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