如何强制更新 Single-page 应用程序

Question

我在一个 AngularJS Single-page 应用程序上工作，一旦加载（所有资源都从 HTTP 服务器获取）仅访问 REST 后端以获取 get/send 数据。任务是如何确保用户始终使用最新版本的前端代码（.js、.css 和 .html 文件），同时用户从不离开页面并且从不刷新浏览器.

我认为有几种选择：

前端每N分钟询问一次HTTP服务器最新的前端代码版本是多少
后端在前端代码检查的每个响应中包含最新的前端代码版本（例如，一个额外的 HTTP header）
后端 returns 具有最新前端代码版本的 cookie，并检查用户提供的版本是否已过时
浏览器和后端之间的 websocket 连接（我不适合）

你知道其他方法吗？

Answer 1

你也可以使用html5 application cache，这样每次有变化，网站会在第一次访问时自行更新，非常方便，比普通缓存更快。

Answer 2

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

在我的 angularjs APP 的 .htaccess 和我的 API 服务器的 .htaccess 我添加了一个 header:

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

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

现在在我的 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;
        }
    };
});

我添加了一个空检查，因为当我加载同一个视图两次时，我得到的是 Empty Header Object 并且在我的控制台中我没有看到任何发送到的请求服务器..不知道为什么会发生这种情况，如果有人能解释一下，我们将不胜感激:)

所以每当我对我的 code/update 应用程序进行更改时，我都会将我的 header appVersion 更改为 1.3 并将我的 index.html 变量更改为 var frontendVersion = 1.3

希望对您有所帮助。如果还有其他最佳解决方案，请告诉我，

谢谢，

如何强制更新 Single-page 应用程序

How to force an update of a Single-page application

javascript

angularjs

single-page-application