如何强制更新单页应用程序

Question

我正在开发一个AngularJS单页应用程序，一旦加载（所有资源从HTTP服务器获取），只访问REST后端以获取/发送数据。任务是确保用户始终使用最新版本的前端代码（.js、.css和.html文件），当用户从不离开页面且从不刷新浏览器时，该如何实现。

我认为有几种选择：

1. 前端每隔N分钟向HTTP服务器询问最新前端代码版本
2. 后端在每个响应中包含最新的前端代码版本（例如，额外的HTTP头），由前端代码进行检查
3. 后端返回带有最新前端代码版本的cookie，并检查用户提供的版本是否过时
4. 浏览器与后端之间的Websocket连接（对我来说不是一个选项）

您知道其他方法吗？

- Adam Siemion

---

是的，将版本号设置到文件中，并在头部禁用缓存。 - vinayakj

@vinayakj 我确实想为静态文件启用缓存，但index.html页面有一个例外，这已经由grunt-cache-bust插件解决了。问题实际上是关于另一种用例的。 - Adam Siemion

你说过：“如何确保用户始终使用最新版本的前端代码”。 - vinayakj

好的，我的错，谢谢，添加了“当用户从未离开页面并且从未刷新浏览器时”。 - Adam Siemion

当然，您需要以某种方式通知客户端已更改并需要刷新。有许多方法可以做到这一点，哪种方法最好取决于您的情况。 - Kevin B

Answer 1

您也可以使用 HTML5 应用程序缓存，这样每当有更改时，网站在第一次访问时就会自动更新，非常方便且比普通缓存更快。

- Mohsen Shakiba

---

已弃用 此功能已从Web标准中删除。尽管某些浏览器仍可能支持它，但正在被逐步淘汰。如果可能的话，请避免使用它并更新现有代码；请参考本页面底部的兼容性表格以指导您的决策。请注意，此功能随时可能停止工作。 - catbadger

Answer 2

最近我在Angularjs SPA中使用了第二种方法。我的做法是：

在我的Angularjs应用程序的 .htaccess 和 API服务器的 .htaccess 中，我添加了一个标头：

<IfModule mod_headers.c>
    Header add appVersion "1.2"
</IfModule>

现在，每当我从API服务器或前端(js、html、css、图像)获取任何内容时，都会收到此标头。

现在，在我的index.html中，我定义了一个变量，类似于：

var frontendVersion = 1.2

我有一个HTTP响应拦截器，它会查找每个响应，我已经做了类似以下的操作。

myAPP.factory('httpRespInterceptor', function () {

    return {
        response: function (response) {
            var appVersion = response.headers('appVersion')
            if(appVersion == frontendVersion) {
                console.log('ok')
            } else if (appVersion != null) {
                location.reload();
            }

            return response;
        }
    };
});

我添加了一个null检查，因为当我两次加载相同的视图时会得到一个空的头对象，在我的控制台中我没有看到任何被发送到服务器的请求。我不知道为什么会发生这种情况，如果有人能够帮忙解释一下就太感激了 :)

所以每当我更改我的代码/更新应用程序时，我将把我的头部appVersion更改为1.3，并将我的index.html变量更改为var frontendVersion = 1.3。

我希望这可以帮助解决问题。如果除此之外还有其他更好的解决方案，请告诉我。

谢谢。

- Usman Pervaiz