我正在使用 angular5 编写的 PWA。我正在使用:“@angular/cli”:“1.6.0-rc.1”。"@angular/language-service": "^5.0.0",
我想通知用户应用程序的更新以刷新页面。
当我在本地运行代码并在输出文件夹上监听 http-server 时,它工作正常,我看到了更新流程和用户的确认消息。
当使用 localhost 在 IIS 中本地运行应用程序时,它也可以正常工作,并且我看到了更新流程和用户的确认消息。
当使用特定域在本地运行应用程序(在 IIS 中绑定到应用程序的主机文件中编辑)时,它不起作用。
在生产中运行应用程序时,它不起作用。
在第 3 点和第 4 点中,当我说“不起作用”时,我的意思是我收到 Uncaught (in promise) Error: Hash mismatch (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);
})
}
也许我错过了一些我正在以角度部署它的域的特定配置?