部署新版本后，即使清除缓存后，浏览器也会看到旧版本的 Angular 应用程序

Question

我有一个 Angular 11 应用程序，正在使用以下命令构建用于在生产中部署：

npm install
npm run build -- --prod --outputHashing=all

我遇到的问题是，部署后，当我使用浏览器访问应用程序的 URL 时，我仍然看到该应用程序的旧版本。

我最初认为这是一个缓存问题，即使我使用该--outputHashing=all选项进行编译（据我所知，该选项似乎正在工作，dist文件夹中的输出文件似乎具有随机文件名）。情况似乎是这样：如果我在 Chrome 开发选项中禁用缓存后刷新页面，它现在会显示更新的应用程序。

然而，问题是：如果我关闭浏览器并再次打开它......我会回到旧的应用程序！因此，清除缓存似乎是一种临时解决方案。

经过进一步调查，我怀疑它与 Angular 相关service workers，因为当我打开 Chrome 的开发工具加载页面时，我可以看到很多网络调用被标记为Served from service worker.

然而，我还不够 Angular 专家，不知道如何进一步诊断。我已经阅读了 Angular 网站上有关 Service Worker 的文档，但它并没有帮助我弄清楚问题到底出在哪里。有人能指出我正确的方向吗？这是我的服务工作线程配置文件，它是在创建应用程序时自动生成的。如果我还需要提供其他文件，请告诉我：

{
  "$schema": "./node_modules/@angular/service-worker/config/schema.json",
  "index": "/index.html",
  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "resources": {
        "files": [
          "/favicon.ico",
          "/index.html",
          "/manifest.webmanifest",
          "/*.css",
          "/*.js"
        ]
      }
    },
    {
      "name": "assets",
      "installMode": "lazy",
      "updateMode": "prefetch",
      "resources": {
        "files": [
          "/assets/**",
          "/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"
        ]
      }
    }
  ]
}

如果有什么区别的话，该应用程序托管在运行嵌入式 Katana Web 服务器的 .NET Core 服务内，但它看不出这会产生什么区别，它只是提供文件而无需进一步操作。

Answer 1

即使文件名都经过哈希处理，也没有多大帮助。唯一的方法是使用 Ctrl + Shift + R 进行硬刷新，或者任何硬刷新是 javascript 中唯一的方法，location.reload()就是函数。

好消息是我们有 PWA（服务工作者）可以在您的浏览器上检测您网站的所有更改。

只需添加ng add @angular/pwa即可与 Service Worker 集成。

并使用它来检测变化。

这段代码到app.component.ts

  hasUpdate = false;

  constructor(
    private swUpdate: SwUpdate,
  ) {
  }

  ngOnInit(): void {
    // check for platform update
    if (this.swUpdate.isEnabled) {
      interval(60000).subscribe(() => this.swUpdate.checkForUpdate().then(() => {
        // checking for updates
      }));
    }
    this.swUpdate.available.subscribe(() => {
      this.hasUpdate = true;
    });
  }

  reloadSite(): void {
    location.reload();
  }

当有时，hasUpdate您true可以向用户显示一些警报消息，当用户选择该消息时，您可以调用函数location.reload

<div *ngIf="hasUpdate">
  <button (click)="reloadSite()">Reload</button>
</div>

这是处理此缓存问题的最佳方法。