检测单页应用程序上的应用程序版本更改 [英] Detect application version change on a single page application

问题描述

今天在这里提出了一个问题，我没有明确的答案.

today a question was raised here and I don't have an evident answer.

假设我们连接并缩小所有资源文件(CSS 和 Javascript)并在母版页"中声明它们.

Assume that we concatenate and minify all resource files (CSS and Javascript) and declare them in the "Master-Page".

在多页应用中，如果 CSS 文件发生更改，它将在下一次加载整页时重新充电.

On a multi-page app, if a CSS file changes it will be recharged on the next full page load.

在单页应用中，用户可以连续工作数天，而无需为声明 CSS 文件的主页充电.在发出 Ctrl-F5 之前，用户永远不会看到更改.

On a single-page app, the user can keep working for days and never recharge the main page where the CSS files are declared. The user will never see the changes until a Ctrl-F5 is issued.

我相信有人已经想到了这一点并且有经验可以分享:)

I'm sure someone already thought of this and have an experience to share :)

对我来说，使用 WebSockets 不是一种选择.首先是因为它太过分了，其次是因为并非我的所有客户都支持该技术.同样的原因适用于所有 WebSockets 回退......因此我不会继续攻击我的服务器.

For me, using WebSockets is not an option. First because it's overkill and second because not all my clients support the technology. Same reason applies to all WebSockets fallbacks... I won't keep hitting my servers because of this.

那么，有人有什么想法吗?:)

So, any ideas anyone? :)

顺便说一句，如果 AngularJS 可以帮助解决特定的解决方案，我们将使用它.

BTW, we're using AngularJS if that can help for a specific solution.

谢谢！

推荐答案

我遇到了同样的问题.我的解决方案是有意见的，可能无法满足您的标准:

I've getting through this same problem. My solution which is opiniated and may not respond to your criterias :

当我打包我的前端应用程序和我的服务器应用程序时，我共享一个包含前端应用程序当前版本的配置文件.

When i package my front-app and my server-app, I share a configuration file containing the current version of the front-app.

前端:我的 75% 的路由更改隐式调用 Web 服务(路由更改解析).所以每次我调用我的服务器时，我都会包含一个包含前端应用程序客户端版本的自定义 HTTP 标头(或 GET/POST 参数).

Front side : 75% of my routes change implicitely call a Webservice (route change resolve). SO each time I call my server I include a custom HTTP header (or a GET/POST param) containing the client version of the front-app.

服务器端:我将前端应用版本(用户浏览器中的版本，上次用户刷新/加载 SPA 时加载的版本)与共享配置文件的前端应用版本进行比较:

Server side : I compare the front-app version (the one in the browser of the user, loaded last time user refreshed/loaded the SPA) with the front-app version of the shared configuration file :

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

然后前端:我添加了一个响应拦截器，拦截任何 418 错误代码并强制刷新整个应用程序

Then front side: I added a response Interceptor that intercepts any 418 error code and do a force-refresh of the whole app

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

That's it. Basically the event that "check" if the front-app version is the latest is a route change (that calls a WS via ajax). But you could add some infinite $interval calling a dedicated WS each 5 minutes or so... I can add some code if needed.

希望这有帮助;)

这篇关于检测单页应用程序上的应用程序版本更改的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！