2017-06-29 176 views
2

基本设置:角1.5 SPA Apache的2.4通过REST API同样来自于Apache 2.4的支持提供服务。刷新缓存角SPA

我已阅读一切可以利用的技术,允许一些应用程序代码在服务器上更改后SPA是新鲜和更新。

解决方案通过HTTP caching(HTTP报头)来或缓存无效(版本例如文件名)技术。它们都基于网络浏览器提出获取资源的请求,并具有一些机制来了解内容是否需要更新或可以从缓存中提供。

SPA的主要问题是资源请求不是通常在初始化负载后进行的,因为Web应用程序在浏览器中很快加载并且只有XHR调用后端才会启动以加载数据。在很多情况下,用户在很长一段时间内没有刷新文件很不方便,因此不会关闭该选项卡。

最难的问题是index.html文件(see this post)。这是第一次在浏览器中加载应用程序时才被调用,然后永远不会被请求。只有手动浏览器页面重新加载可以为该文件启动第二个请求。

所有的JavaScript和CSS文件是为index.html请求后加载,然后永远不会重新加载。只有index.html的新请求才能刷新它们。

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

我这个问题,我受影响的方法有两种:

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

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

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

  1. this answer
  2. 在每一个XHR调用当前部署的版本检查,并检查它是否在浏览器中加载的版本diferent ,

但:

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

我错过了每个人如何处理Angular缓存?

+0

你有没有发现这一个一个解决方案,我在确切的问题运行减去我使用淘汰赛没有棱角 –

回答

1

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

<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' 
}); 
+0

这不是我的问题。我知道如何破坏静态文件,但如果index.html文件没有重新加载,它们的url不会被这个新的参数更新,也不会对这个文件发出请求,所以它们不会被重新加载。 –

+0

您可以配置网络服务器始终为index.html提供新鲜内容并将no-cache标头放入其中吗? – Paras

+0

任何这些解决方案都需要浏览器启动对“index.html”文件的请求,但是在单个页面应用程序中,只有在网页首次加载到浏览器中时才会执行此操作。然后,只有内部路由才能更改视图,有时会加载一些html,但不会再请求index.html或css或javascript文件。只要该选项卡未关闭或启动手动浏览器重新加载,网络就可以在浏览器中生活几天,不会请求index.html文件。 –