"Hash mismatch" error after deploying an update of PWA to IIS in production

Question

I have a PWA written in angular5 I'm working on. I'm using: "@angular/cli": "1.6.0-rc.1". "@angular/language-service": "^5.0.0",

I want to notify the user of an update to the app so as to refresh the page.

1. When I run the code locally with http-server listening on the output folder, it works fine and I see the update flow and a confirmation message for the user.

2. When running the app locally in IIS with localhost, it also works fine and I see the update flow and a confirmation message for the user.

3. When running the app locally with specific domain (edited in host file bound to the app in IIS), it doesn't work.

4. When running the app in production it doesn't work.

In both points 3 and 4, when I say "doesn't work", I mean I get an exception message of Uncaught (in promise) Error: Hash mismatch (cacheBustedFetchFromNetwork):

When I try to check it on the mobile against production, I also don't see the update flow happening.

After I refresh the page again, I see the changes and the error message disappears (the update has been done)

Here's the code that does the update:

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

Maybe I'm missing some specific configuration for the domain I'm deploying it to in angular?

Answer 1

I ran into this and had to manually clear my Application Cache. Normally I would just use the clear site data button, but for some reason I am having to open the Cache Storage and right click, delete for each item. Then redo the 'add to desktop'.