如何防止Angular 2站点上的浏览器缓存？

Question

我们目前正在开发一个新项目,定期更新,我们的客户每天都会使用这些更新.该项目正在使用角度2开发,我们面临缓存问题,即我们的客户没有看到他们的机器上的最新变化.

主要是js文件的html/css文件似乎得到了正确的更新而没有给出太多麻烦.

Answer 1

angular-cli通过为build命令提供--output-hashing标志来解决这个问题.用法示例:

ng build --output-hashing=all

Bundling&Tree-Shaking提供了一些细节和背景.运行ng help build,记录标志:

--output-hashing=none|all|media|bundles (String) Define the output filename cache-busting hashing mode.
aliases: -oh <value>, --outputHashing <value>

虽然这仅适用于angular-cli的用户,但它的工作非常出色,不需要任何代码更改或其他工具.

Answer 2

找到了一种方法,只需添加一个查询字符串来加载组件,如下所示:

@Component({
  selector: 'some-component',
  templateUrl: `./app/component/stuff/component.html?v=${new Date().getTime()}`,
  styleUrls: [`./app/component/stuff/component.css?v=${new Date().getTime()}`]
})

这应该强制客户端加载服务器的模板副本而不是浏览器的副本.如果您希望仅在一段时间后刷新它,则可以使用此ISOString:

new Date().toISOString() //2016-09-24T00:43:21.584Z

并对一些字符进行子字符串处理,以便它只会在一小时后更改,例如:

new Date().toISOString().substr(0,13) //2016-09-24T00

希望这可以帮助

Answer 3

在每个html模板中,我只在顶部添加以下元标记:

<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">

根据我的理解,每个模板都是独立的,因此它不会继承index.html文件中的元无缓存规则设置.

Answer 4

@Jack 的回答和 @ranierbit 的回答相结合应该可以解决问题。

为 --output-hashing 设置 ng build 标志，以便：

ng build --output-hashing=all

然后在服务中或在您的 app.module

@Injectable()
export class NoCacheHeadersInterceptor implements HttpInterceptor {
    intercept(req: HttpRequest<any>, next: HttpHandler) {
        const authReq = req.clone({
            setHeaders: {
                'Cache-Control': 'no-cache',
                 Pragma: 'no-cache'
            }
        });
        return next.handle(authReq);    
    }
}

然后将其添加到您的提供者中app.module：

providers: [
  ... // other providers
  {
    provide: HTTP_INTERCEPTORS,
    useClass: NoCacheHeadersInterceptor,
    multi: true
  },
  ... // other providers
]

这应该可以防止在客户端计算机的实时站点上出现缓存问题

Answer 5

将其添加到您的 nginx

location ~ /index.html|.*\.json$ {
        expires -1;
        add_header Cache-Control 'no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0';
    }

location ~ .*\.css$|.*\.js$ {
   add_header Cache-Control 'max-age=31449600'; # one year
}

location / {
    try_files $uri $uri/ /index.html?$args;
    add_header Cache-Control 'max-age=86400'; # one day
}