AngularJS 浏览器缓存问题

Question

早上好，我在生产环境中有一个 Web 应用程序。用户每天都在使用它，当我发布更新并且用户返回到 Web 应用程序时，他会查看旧版本的 Web 应用程序。他需要刷新浏览器以加载新版本。我怎么解决这个问题？每次发布更新（每周 3-4 次）时，我都无法告诉数百名用户刷新页面。

Answer 1

一个简单的解决方案是将 表示时间戳或会话 ID 的查询字符串添加到您的文件中。

例如，在我们的 spring 应用程序中，我们只需使用：

<script src="js/angular/lib/app.js?r=<%= session.getId()%>"></script>

您也可以在您的服务器特定实施中实施相同的解决方案。

Answer 2

经典的缓存问题。除非另有说明（由网络服务器），否则浏览器将根据文件名缓存资产。因此，当它看到具有相同名称的相同 script/style/image 时，它将 304 并提供缓存版本。有几种解决方法，您可以：

配置网络服务器以告知浏览器不要缓存该文件。这显然是低效的，因为用户将不得不一次又一次地下载相同的文件。

将查询字符串参数附加到文件名，例如 my-angular-code.js?x=123，同样效率低下。

对您的资产进行指纹识别。这在 Rails 中有清楚的解释，Asset Pipeline documentation. There are several ways to achieve this, there are grunt tasks and gulp tasks 也可用于此。本质上就是当内容改变时才改变文件名的过程，迫使浏览器认为它是一个新文件。

Answer 3

第一步是了解服务器端目前正在发生的事情。理解并configure Cache-Control and Etag. While you can use query string parameters, file fingerprinting is a better technique 因为将允许代理服务器缓存文件。

想法是将可以更改的文档（如果您有 Angular 应用程序，这很可能只是您的 index.html）设置为 no-cache 并积极缓存资源该文档引用。当您发布新版本时，您的资源都会被重命名，并且当收到请求时，一切都会按预期进行。

我在 Angular 应用程序中使用 grunt-rev。效果很好。

Answer 4

如果您使用的是HTML5，那么您可以使用Application Cache。它会自动检查更新，您可以提示用户刷新缓存。

这里有一些关于如何使用它的好教程：

A Beginner's Guide to Using the Application Cache

Using the application cache

Let's take this offline（离线网络应用程序）

Answer 5

第一步是获取时间戳并将时间戳作为 URL 中的查询参数传递给 .html 扩展。

每次加载 html 内容时，由于时间戳附加到 URL。

，因此它会使用不同的路由呈现

示例：

var date = new Date().getTime().toString();
app.config(['$stateProvider', '$urlRouterProvider',function($stateProvider, $urlRouterProvider){
}])
$stateProvider.state('app', {
    abstract: true,
    url: '/app',
    cache: false,
    templateUrl: 'views/app.html'**+'?t='+ date**
  })
.state('app.dashboard', {
    url: '/dashboard',
    cache: false,
    controller: 'DashboardCtrl as showCase',
    templateUrl: 'components/dashboard/dashboard.view.html'**+'?t=' + date** ,
  })

AngularJS 浏览器缓存问题

AngularJS browser cache issues

caching

angularjs