Angular Pwa 未在已安装的应用程序上刷新 html

Question

我的 Angular PWA 有刷新问题。 我有一个TAB 已禁用。

<nz-collapse-panel [nzActive]="false" [nzDisabled]="true">   

现在在代码上，我将此选项卡设置为启用并构建解决方案并部署在网络空间上。

<nz-collapse-panel [nzActive]="false" [nzDisabled]="false">  

如果转到 PWA 并 刷新，此 Collapse 保持禁用。我必须越来越多地重新加载页面，最后，选项卡已启用。

我关闭并重新打开应用程序，标签被禁用...

数据正确且已刷新。 似乎只有 HTML 使用了一些未刷新的缓存。

奇怪的是，重新加载页面更多时间后，TAB 变为启用状态（所以我认为已经更新缓存）并且重新打开应用程序时，TAB被再次禁用。

menù 也不会刷新列表。似乎只有 html 元素不刷新。

我的配置是 Angular 11 和 Ng-Zorro

附言 显然，如果我在开发者工具 -> 应用程序 -> 删除站点数据上继续浏览器，缓存被清除并且 PWA 被更新但在手机上我不能而且我不想这样做

这是我的 ngsw 文件：

{
"version": 3,
"$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)"]
        }
    }
],
"cacheConfig": {
    "strategy": "freshness"
}

}

还有我的 appcomponent 文件

constructor(public baseService: BaseService, public webapi: WebapiService, private swUpdate: SwUpdate) {
    this.baseService.initialize();
    this.baseService.setWidth(window.innerWidth);
    //#region Check for updates
    if (this.swUpdate.isEnabled) {
        this.swUpdate.activated.subscribe((upd) => {
            window.location.reload();
        });
        this.swUpdate.available.subscribe(
            (upd) => {
                this.swUpdate.activateUpdate();
            },
            (error) => {
                console.error(error);
            }
        );
        this.swUpdate
            .checkForUpdate()
            .then(() => {})
            .catch((error) => {
                console.error('Could not check for app updates', error);
            });
    }
    //#endregion
}

Answer 1

@angular/pwa 包含一个缓存整个 Angular 应用程序的服务工作者。要更新它，您必须：

1. 通过在根级别添加"version": 1, 字段来更新您的ngsw-config.json。在每次部署时增加版本。
2. 致电SwUpdate:

代码示例：

constructor(private swUpdate: SwUpdate) {
  //#region Check for updates
  if (this.swUpdate.isEnabled) {
    this.swUpdate.activated.subscribe((upd) => {
      window.location.reload();
    });
    this.swUpdate.available.subscribe((upd) => {
      this.swUpdate.activateUpdate();
    }, (error) => {
      console.error(error);
    });
    this.swUpdate.checkForUpdate().then(() => {
    }).catch((error) => {
      console.error('Could not check for app updates', error);
    });
  }
  //#endregion
}

我已经体验到，并不总是需要在每次新部署时增加版本，但我还是这样做了。

Here's my ngsw-config.json