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

【问题标题】：how to clear the browser cache on the application load without effecting pagination?如何在不影响分页的情况下清除应用程序加载时的浏览器缓存？
【发布时间】：2018-01-29 07:57:23
【问题描述】：

我正在开发 Angular js 应用程序。

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

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

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

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

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

}

它正在清除缓存，但是在将此代码添加到应用程序后分页不起作用。

任何帮助表示赞赏，在此先感谢。

【问题讨论】：

困扰你的缓存不是模板缓存。加载应用程序时，模板缓存始终为空。浏览器缓存不是。在 JavaScript 包中捆绑模板，或配置服务器发送标头以防止浏览器缓存模板。

标签： angularjs

【解决方案1】：

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

Want to Browse Faster? Stop Clearing Your Browser Cache

如何将版本设置为files和api requests，你可以在每次发布后放置一个全局变量来处理它例如：

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)
})

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

【讨论】：

【解决方案2】：

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

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

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

您可以查看gulp-rev，这是一个非常好的库，可用于重新构想您的静态资产。

要快速完成，您可以在主模块上使用 Interceptor，并将版本号附加到每个请求。您需要确保在每次发布后都需要更改版本号。 这种方法的缺点是，即使是没有改变的文件也会被刷新。

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 中找到有关 Interceptors 的更多详细信息

【讨论】：