2014-04-14 81 views
21

今天在这里提出了一个问题,我没有明显的答案。检测单个页面应用程序上的应用程序版本更改

假设我们串接和缩小所有资源文件(CSS和Javascript),并在“母版页”申报。

在多页的应用程序,如果一个CSS文件变化,它会在下一次全页面加载充电。

在一个单页的应用程序,用户可以保持数天的工作,从来没有充电的地方CSS文件中声明的主要页面。在发出Ctrl-F5之前,用户将永远不会看到更改。

我已经想到了这一点肯定有人和有经验的分享:)

对我来说,使用的WebSockets不是一个选项。首先是因为它过度杀伤,其次是因为不是所有的客户都支持这项技术。同样的原因适用于所有的WebSockets后备...我不会因此而继续点击我的服务器。

那么,任何想法的人? :)

顺便说一句,我们使用AngularJS如果,可以帮助一个具体的解决方案。

谢谢!

回答

21

我已经经历了同样的问题。我的解决方案这是opiniated并且不会对您回应审核规定:

当我打包我前面的应用和我的服务器应用程序,我共享包含前端应用程序的当前版本的配置文件。

正面:我的路线的75%的变化隐含调用web服务(路由变化的决心)。所以每次我打电话给我的服务器时,我都会包含一个包含前端应用程序客户端版本的自定义HTTP标头(或GET/POST参数)。

服务器端:我比较前应用版本(一个在用户的浏览器中,最后加载时间用户刷新/加载的SPA)与所述共享的配置文件的前应用版本:

  • 如果版本匹配:我什么都不做。
  • 如果版本不匹配我发送自定义HTTP状态错误代码(418例)

然后前侧:我补充说,拦截任何418错误代码并执行力刷新的响应拦截整个应用程序

就是这样。基本上,“检查”前端应用程序版本是否最新的事件是路由更改(通过ajax调用WS)。但你可以添加一些无限的$超时callind一个专用的WS每5分钟左右... 如果需要,我可以添加一些代码。

希望这有助于;)

+0

我最初的想法是以相反的方式执行此操作,使后端发送版本并在客户端上进行比较,但存在一个常见问题在这两种方法中:我有多个RESTful服务,每个服务都有独立版本,对特定的应用程序一无所知,所以他们永远不会验证这一点。 Althogh,因为我写的,我想,也许反向代理,也就是应用特定的,可以做的工作...... – AlexCode

+0

无限$超时转化为WebSockets的还是它的回退更具体Longpolling我不想为此使用。这通常不足以证明持续点击服务器进行验证。 – AlexCode

+0

是的,这里的选择取决于你的整个技术架构..顺便说一句,如果是的WebSockets和矫枉过正太最近,你coulsd看看SSE(服务器发送事件:http://www.w3schools.com/html/html5_serversentevents。 asp),它比socket更轻。例如io(它是单向服务器 - >客户端推送) –

-3

打电话给我老式的,但我只是让我的用户知道,有一个更酷,更好,更方便更新的UI提供一些警报框,当他们采取行动,并点击它 - 只需刷新页。也许代码不会解决这个问题,但一些用户体验心理学...

+1

该通知是为我好,但如何应用程序实际上知道,有一些新的更新?这是一个SPA,在第一批资源加载之后,其余流量主要是通过AJAX请求到RESTful服务的数据。 – AlexCode

+0

啊,我明白了......我只是在这里读@Bixi的回答,他的建议听起来很不错。不仅仅是为了解决你现在面临的这个问题,而是为了防止未来的版本兼容性问题。 – Tiwaz89

+0

问题是我使用了更多的一个web服务,并且它们都不是特定于应用程序的。他们都不知道他们提供的应用程序的任何内容,并且每个都有自己的版本。我需要在应用程序环境中进行验证,而不是在服务中进行验证... – AlexCode

1

假设你正在使用通过$路由服务和供应商AngularJS”路由,那么你可以使用$routeChangeSuccess事件是否有需要改变显著改变执行服务器请求;如果有的话,你可以做一个window.location.reload()来刷新页面,并获取所有更新的资源和htmls。

以下过程可以根据您希望如何实现它而改变:

。在服务器上设置一个配置文件,指出应用程序的版本。您也可以选择为不同的文件分配不同的版本,但由于您连接了所有资源文件,因此我想您可能会限制您的配置中的版本选项。

。创建一个包含所有必要信息(来自服务器的文件版本)的服务以及向您的服务器执行服务器请求以检查存储在服务中的当前文件版本的方法。

。使用$routeChangeSuccess事件使用您在步骤2 创建,如果该请求返回一个有效的确认,有那么通过改变做window.location.reload()力页面重载的服务执行服务器请求。

+0

谢谢队友。我在Bixi的回答中的最后一个回复解释了我们现在最终做了什么。 – AlexCode

1

我决定增加我最后的想法作为一个答案在这里太:

我们去了更低的解决方案现在。

因为我们有一个“代理服务”,也就是(同样现在)与该应用程序交互的唯一一个,我们增加了对所有响应的HTTP头中的应用程序版本。如果我们收到一个新的版本,一个弹出窗口,通知用户,并刷新整个页面发出...

该解决方案不会为没有自己的“私人”的服务应用程序。