Question

我正在开发角度js应用程序。

第一次应用程序正常运行时，当我们发布新的版本时，当我们尝试访问页面浏览器的用户仍在加载旧文件时，浏览器中会显示新的更改，以加载新的更改用户必须清除缓存并重新加载应用程序。

有没有办法在应用程序加载时清除浏览器缓存。

我正在清理缓存，如下所示。

function run($rootScope,$state, $stateParams, authorization, principal,$templateCache) {

//code to clear the cache.....
    $rootScope.$on('$viewContentLoaded', function() {
      $templateCache.removeAll();
  });

}

正在清除缓存，但在将此代码添加到应用程序后，分页功能无效。

任何帮助表示感谢，提前谢谢。

Answer 1

尝试为所有文件和http请求设置版本，不要清除缓存！

Want to Browse Faster? Stop Clearing Your Browser Cache

如何将版本设置为文件和api 请求，您可以在每次发布后设置一个全局变量来处理它，例如：

var version = "1.0.0";

var app = angular.module("app", []);

app.config(function(){
    //for routes
    //pages.html?v="+version 
    //controller.js?v="+version
})

app.controller("ctrl", function($http){
    $http.get("api/posts?v=" + version)
})

使用此版本，您可以处理用户的浏览器缓存。

Answer 2

这是一个常见问题，要解决此浏览器缓存问题您需要为所有静态文件添加某种唯一标识符（哈希/时间戳）。

有很多后端框架捆绑您的文件，对其进行优化并添加一个唯一的哈希值，在原始文件发生任何更改后会更改。

工具因您使用的后端框架而异。这是处理此问题的理想方法。

您可以查看gulp-rev，这是一个非常好的图书馆，用于重新审视您的静态资产。

要快速执行此操作，您可以在主模块上使用 拦截器 ，并为每个请求附加版本号。您需要确保在每次发布后都需要更改版本号。 这种方法的缺点是，即使是未更改的文件也会刷新。

yourModule.factory('cacheInterceptor', 
['$templateCache', '$window', function ($templateCache, $window) {
        var cacheInterceptor = {
            request: function (request) {
                if ($templateCache.get(request.url) === undefined) {  
                    var appVersion = '';
                        appVersion = $window.MyApp.appVersion;
                      request.url = request.url + '?appVersion=' + appVersion;
                }
                return request;
            }
        };
        return cacheInterceptor;
    }]);

注意：每次加载应用程序时，您需要在窗口对象上指定的版本号。

您可以在AngularJS here

中找到有关 拦截器 的更多详情

如何在不影响分页的情况下清除应用程序加载上的浏览器缓存？

2 个答案: