javascript - 检测单页应用程序上的应用程序版本更改

Question

今天有人提出了一个问题，但我没有明确的答案。

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

在多页面应用程序上，如果 CSS 文件发生更改，它将在下一次完整页面加载时重新加载。

在单页应用程序上，用户可以连续工作数天，而无需重新访问声明 CSS 文件的主页。在发出 Ctrl-F5 之前，用户永远不会看到更改。

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

对我来说，使用 WebSockets 不是一个选择。首先是因为它太过分了，其次是因为并非所有我的客户都支持这项技术。同样的原因也适用于所有 WebSockets 后备...我不会因此而继续访问我的服务器。

那么，大家有什么想法吗？ :)

顺便说一句，如果 AngularJS 对特定解决方案有帮助的话，我们正在使用它。

谢谢!

Answer 1

我也遇到了同样的问题。我的解决方案固执己见，可能无法满足您的标准:

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

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

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

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

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

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

希望这有帮助；)