javascript - 如何使用 Angular 处理站点更新？

Question

我在 github 页面上托管了一个 Angular 应用程序。当我推出新版本时，网站部分加载的用户可能会遇到问题，直到页面刷新。

我认为这可能是因为用户浏览器下载了 View 的更新版本。更新后的 View 使用了一个新指令，该指令不在他们在浏览器中加载的模块中。

我可以想出很多技巧来解决这个问题，但这肯定是很常见的事情。是否有标准方法来处理此问题或构建应用程序以避免这些问题。

Answer 1

假设您缩小了客户端 javascript 和/或 css Assets ，您可以检查是否以以下形式包含在 html 中的脚本或样式表:

<script src="scripts/vendor.a2d3cfb2.js"></script>

仍然存在于服务器上 - 如果不存在，您可以提示用户重新加载应用程序，因为这可能表明正在部署应用程序的新版本。

请注意，这需要使用一个经常更改的文件，如果不是总是在部署新版本的应用程序时更改。如果您没有这样的文件，或者您的应用程序经常部署并进行小的更改，您可以使用您的 index.html 来验证样式表链接中的 cache busters，javascripts从服务器获取的新版本已更改。

检查更新脚本文件的粗略草图:

var module = angular.module('test', []);
module.run(function($interval, $http) {
  var intervalHandle;
  var scripts = [].slice.call(document.scripts);
  var testFile = scripts[0]; //use resource whose uri changes with each deploy
  intervalHandle = $interval(function() {
    $http.head(url + '?' + Date.now()) //scripts may be large avoid downloading content
      .catch(function(response) {
        if (response.status === 404 || response.status === 410) {
          alert('New version may be deployed.');
          $interval.cancel(intervalHandle);
        }
      });
  }, 5 * 1000 * 60); //every five mnutes

});