3

我正在使用 angular5 编写的 PWA。我正在使用:“@angular/cli”:“1.6.0-rc.1”。"@angular/language-service": "^5.0.0",

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

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

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

  3. 当使用特定域在本地运行应用程序(在 IIS 中绑定到应用程序的主机文件中编辑)时,它不起作用。

  4. 在生产中运行应用程序时,它不起作用。

在第 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);
})
}

也许我错过了一些我正在以角度部署它的域的特定配置?

4

1 回答 1

0

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

在此处输入图像描述

于 2018-01-15T18:30:27.530 回答