Angular Pwa不刷新已安装应用的html

Question

我有一个Angular PWA有提神的问题。我禁用了选项卡.

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

现在在代码中，我将这个选项卡设置为enabled并构建解决方案并部署到web空间。

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

如果a转到PWA和． 我必须重新加载页面越来越多的时间，最后，选项卡是启用的。

我关闭并重新打开应用程序，选项卡被禁用…

数据正确并刷新。似乎只有HTML正在使用一些没有刷新的缓存.

奇怪的是在重新加载页面更多的时间后，标签变成启用(所以我认为已经更新缓存)和当重新打开应用程序，再次被禁用。

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包含一个service worker，它会缓存你的整个angular应用。要更新它，你必须:

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

代码示例:

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
}

我有过这样的经历:并不总是需要在每次新部署时增加版本，但我还是这样做了。

这是我的ngsw-config.json