Question

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

Answer 1

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

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

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

指纹您的资产。这在Rails＆＃39;中得到了很好的解释。 Asset Pipeline文档。有几种方法可以实现此目的，grunt tasks和gulp tasks也可用于此。本质上，它是仅在内容更改时更改文件名的过程，强制浏览器将其视为新文件。

Answer 2

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

例如，在我们的春季应用程序中，我们只使用：

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

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

Answer 3

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

以下是一些有关如何使用它的好教程：

A Beginner's Guide to Using the Application Cache

Using the application cache

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

Answer 4

第一步是了解服务器端现在正在发生什么。理解和configure Cache-Control and Etag。虽然您可以使用查询字符串参数file fingerprinting is a better technique，因为将允许代理服务器缓存该文件。

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

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

Answer 5

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

由于时间戳是附加到URL的，因此每次加载html内容时都会使用不同的路线进行渲染。

示例：

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浏览器缓存问题

5 个答案: