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

【问题标题】：Browser sees old version of Angular app after new version is deployed, even after clearing cache部署新版本后，浏览器会看到旧版本的 Angular 应用程序，即使在清除缓存后也是如此
【发布时间】：2021-06-28 12:31:23
【问题描述】：

我正在构建一个 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 网站上关于服务人员的文档，但它并没有帮助我找出问题所在。谁能指出我正确的方向？这是我的服务工作者配置文件，它是在创建应用程序时自动生成的。如果我还需要提供其他文件，请告诉我：

{
  "$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 网络服务器的 .NET Core 服务中，但它看不出有什么区别，它只是提供文件而无需进一步操作。

【问题讨论】：

标签： angular angular-service-worker angular11

【解决方案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>

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

【讨论】：