＆＃34;哈希不匹配＆＃34;在生产中将PWA更新部署到IIS后出现错误

Question

我有一个用angular5写的PWA我正在努力。 我正在使用： ＆＃34; @ angular / cli＆＃34;：＆＃34; 1.6.0-rc.1＆＃34;。 ＆＃34; @ angular / language-service＆＃34;：＆＃34; ^ 5.0.0＆＃34;，

我想通知用户应用程序的更新，以便刷新页面。

1. 当我在本地运行代码时，http-server监听输出文件夹，它工作正常，我看到更新流程和用户的确认消息。

2. 在IIS中使用localhost在本地运行应用程序时，它也可以正常工作，我会看到更新流程和用户的确认消息。

3. 使用特定域在本地运行应用程序（在IIS中绑定到应用程序的主机文件中编辑）时，它无法正常工作。

4. 在生产环境中运行应用时，它无法正常工作。

在第3点和第4点，当我说＆＃34;没有工作＆＃34;时，我的意思是我收到一条异常消息 未捕获（承诺）错误：哈希不匹配（cacheBustedFetchFromNetwork）：

当我尝试在移动设备上检查生产时，我也看不到更新流程。

在我再次刷新页面后，我看到更改并且错误消息消失（更新已完成）

以下是执行更新的代码：

export class AppComponent {
title = 'app';
public isUserAuthenticated = false;
constructor(private swUpdate: SwUpdate,
private router: Router,
private authService: AuthenticationService) {
this.isUserAuthenticated = this.authService.isAuthenticated();
this.swUpdate.available.subscribe(event => {      
console.log('----Update available: current version is', event.current, 'available version is', event.available);
if (event.current.hash !== event.available.hash) {
const result = confirm(`----A new Version exists, do you want to update?----`);
if (result)
window.location.reload();
}
});
this.swUpdate.activated.subscribe(event => {
console.log('Update activated: old version was', event.previous, 'new version is', event.current);
});
}

ngOnInit() {
this.checkForUpdate();
this.router.navigate(['/login']);
}

checkForUpdate() {
console.log('---- checkForUpdate started----');
this.swUpdate.checkForUpdate()
.then((res) => {
console.log('---- checkForUpdate completed----');
console.log(`---- res: ${res}----`);
})
.catch(err => {
console.error(err);
})
}
activateUpdate() {
console.log('---- activateUpdate started ----');
this.swUpdate.activateUpdate()
.then(() => {
console.log('---- activateUpdate completed----');        
window.location.reload();
})
.catch(err => {
console.error(err);
})
}

也许我错过了域名的一些特定配置，我将其部署到角色？

Answer 1

我遇到了这个并且必须手动清除我的应用程序缓存。通常我会使用清除站点数据按钮，但由于某种原因，我必须打开缓存存储并右键单击，删除每个项目。然后重做'添加到桌面'。