angular 缓存 html5,Angular 如何及时更新客户端缓存?

如果你是

Angular 新手

或者对 Http 缓存机制理解不清晰

使用 Angular CLI 开发 Angular

请继续往下读。

背景

在 Angular 开发的过程中， 我们经常会发布新的功能或者 fix bug，但是由于浏览器缓存的存在， 可能用户打开的页面并不是最新发布的。 而我们想要的是用户既可以及时看到我们的更新， 又可以在我们没有更新软件时使用缓存中的资源。

解决办法

往往静态资源由 Nginx、apache、IIS 等提供， 我们以 Nginx(当前最新版本是 1.15.8， 请确保 Nginx 版本不低于 1.7.3 changelog) 为例，简单说来就是:

在 Nginx 配置文件 nginx.conf 中确保 Etag 开启(默认是开启的)

对 index.html 设置响应缓存头:

Cache-Control: no-cache

客户端每次请求 index.html 时都要重新验证 index.html 是否发生了改变，

如果发生了改变，就会请求新的 index.html。

css、js 文件中都有 fingerprint，比如， style.x234dff.css.

css、js 文件改变 => fingerprint 改变 => 文件名改变 => index.html 改变 => 浏览器下载新的 index.html => 浏览器请求新的 css、js 文件。

对 css、js、图片等文件设置响应缓存头:

Cache-Control: max-age=31536000 // 缓存一年。

由于 css、js 文件名里有