Angular Web 应用程序的缓存问题

Question

我们有一个 Angular(v9) Web 应用程序，供保险保单持有人登录和管理他们的保单。最近，我们部署了一项新的更改，但是，许多客户没有看到该更改。

我们已设置响应标头和配置如下。

响应头：

缓存控制：无缓存、无存储、max-age=0、无重新验证

angular.json中的配置

配置：{ 生产： { 输出哈希：“全部” } } Service Worker 实现会在应用程序有任何新版本可用时发出警报。如果用户确认提示，应用程序将重新加载。

用户是否可以在不清除浏览器缓存的情况下获取最新更改？

Answer 1

方法有很多，但推荐的方法是使用Cache Bustsing。通常，Angular 设置配置来创建每个文件（在构建过程中），并在文件名中包含唯一的哈希代码。要检查是否是这样，请查看项目中的

Angular.json

文件并检查 outputHashing 是否设置为

all

:

// angular.json
 {
 "projects": {
 "your-project": {
 "architect": {
 "build": {
 "options": {
 "outputHashing": "all"
.....

在 Angular 9 中，您可以在构建命令中手动执行此操作：

ng build --prod --output-hashing=all

最终dist文件夹中的文件应该如下所示：

...
main.6785167b3be88a1b.js
...

为什么这有效：

这样，每个文件名在 html 文件中都有一个唯一的名称，浏览器将绕过缓存检测“新”文件。因此每个新部署的版本都会正确地显示给用户。

其他想法：

在

index.html

中添加一些 meta 标签：

<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">

这些标签告诉浏览器不要缓存页面。然而，这种方法的可靠性不如缓存清除。

最后一种方法是直接在网络服务器上设置 header，如下所示：

Cache-Control: no-cache

---

最终，Angular 的缓存清除将是最好的选择。乍一看，设置网络服务器（标头）或使用

meta

标签可达到相同的结果，但使用这两种方法，浏览器 always 会重新加载整个网站并完全忽略缓存。 通过缓存清除，这种情况只会在页面更新时发生 - 这会提高您期望的快速性能。