Angular 1.6 SPA缓存更新异常：启用缓存击穿仍需强制刷新

嘿，针对你遇到的用户长时间保持页面开启、更新后必须强制刷新或登出才能看到新功能的问题，结合你的技术栈（Angular 1.6 + Grails，已启用资源hash缓存击穿），我给你几个实用的解决思路：

1. 定期检查应用版本，主动提示用户刷新 #

核心问题是用户浏览器可能缓存了旧的index.html——虽然资源文件加了hash，但如果没加载新的index.html，就不会引用带新hash的资源。我们可以在Angular中实现一个版本检测服务：

实现步骤： #

• 先在index.html头部添加版本标识：

<meta name="app-version" content="v1.0.2">

• 创建Angular服务定期检查版本：

angular.module('yourApp')
  .service('VersionChecker', ['$http', '$interval', '$rootScope', '$templateCache', function($http, $interval, $rootScope, $templateCache) {
    var currentVersion = document.querySelector('meta[name="app-version"]').content;
    
    // 每30分钟检查一次（可根据业务调整频率）
    var checkTask = $interval(function() {
      // 用HEAD请求减少带宽消耗，只拿响应头
      $http.head('/index.html', { cache: false })
        .then(function(response) {
          // 也可以用ETag或Last-Modified对比，这里用页面内的版本号示例
          $http.get('/index.html', { cache: false })
            .then(function(res) {
              var newVersion = res.data.match(/name="app-version" content="(.*?)"/)[1];
              if (newVersion !== currentVersion) {
                $rootScope.$broadcast('app:updateAvailable');
                $interval.cancel(checkTask); // 避免重复提示
                $templateCache.removeAll(); // 清空模板缓存
              }
            });
        });
    }, 30 * 60 * 1000);
    
    this.getCurrentVersion = () => currentVersion;
  }]);

• 在run块中监听更新事件，提示用户：

angular.module('yourApp')
  .run(['$rootScope', function($rootScope) {
    $rootScope.$on('app:updateAvailable', function() {
      if (confirm('应用有新版本可用，是否刷新获取最新功能？')) {
        window.location.reload(true); // 强制刷新绕过缓存
      }
    });
  }]);

2. 优化Angular模板的缓存策略 #

Angular 1.6默认会缓存已加载的模板，导致更新后的模板无法被获取，可针对性调整：

方式一：模板请求添加随机参数（简单粗暴） #

在路由配置中给模板URL加随机参数，避免浏览器缓存：

angular.module('yourApp')
  .config(['$routeProvider', function($routeProvider) {
    $routeProvider
      .when('/resources', {
        templateUrl: function() {
          return '/templates/resources.html?v=' + new Date().getTime();
        },
        controller: 'ResourcesController'
      });
  }]);

方式二：检测到更新时清空模板缓存 #

结合上面的版本检测服务，在发现版本更新时直接清空$templateCache，让下次路由切换时重新加载最新模板（代码已包含在上面的VersionChecker服务中）。

3. Grails后端配合调整缓存头 #

确保Grails返回的模板和JSON数据有合理的缓存策略：

• 对于静态模板，设置ETag和可验证缓存：

def getTemplate(String name) {
  def templateContent = render(view: "/templates/${name}", contentType: 'text/html', encoding: 'UTF-8')
  def etag = "${templateContent.hashCode()}".encodeAsMD5()
  response.setHeader('ETag', etag)
  response.setHeader('Cache-Control', 'max-age=0, must-revalidate')
  return templateContent
}

• 对于动态JSON接口，直接禁用缓存：

def getResourceData() {
  def data = // 业务逻辑获取数据
  response.setHeader('Cache-Control', 'no-cache, no-store, must-revalidate')
  response.setHeader('Pragma', 'no-cache')
  response.setHeader('Expires', '0')
  render data as JSON
}

4. 路由切换时触发版本检查 #

如果不想定时轮询，可在用户切换路由时触发版本检测，减少不必要的请求：

angular.module('yourApp')
  .run(['$rootScope', 'VersionChecker', '$http', function($rootScope, VersionChecker, $http) {
    $rootScope.$on('$routeChangeStart', function() {
      $http.get('/index.html', { cache: false })
        .then(function(res) {
          var newVersion = res.data.match(/name="app-version" content="(.*?)"/)[1];
          if (newVersion !== VersionChecker.getCurrentVersion()) {
            if (confirm('应用已更新，是否刷新以获取最新功能？')) {
              window.location.reload(true);
            }
          }
        });
    });
  }]);

你可以根据业务场景组合这些方案，比如版本检测+模板缓存清空的组合，既能保证性能，又能让用户及时获取更新。

内容的提问来源于stack exchange，提问作者YURI SALGADO