"Hash-Mismatch" Fehler nach der Bereitstellung eines Updates von PWA zu IIS in der Produktion

Question

Ich habe eine PWA in angular5 geschrieben, ich arbeite an. Ich verwende: "@ angular/cli": "1.6.0-rc.1". "@ angular/language-service": "^ 5.0.0",

Ich möchte den Benutzer über ein Update der App informieren, um die Seite zu aktualisieren.

1. Wenn ich den Code lokal mit http-Server lauscht auf den Ausgabeordner laufen, es funktioniert gut, und ich sehe das Update Fluss und eine Bestätigungsmeldung für den Anwender.

2. Wenn Sie die App lokal in IIS mit localhost ausführen, funktioniert es auch gut und ich sehe den Update-Fluss und eine Bestätigungsmeldung für den Benutzer.

3. Wenn die App lokal mit spezifische Domäne ausgeführt wird (bearbeitet in Host-Datei an die App in IIS gebunden), funktioniert es nicht.

4. Wenn die App in Produktion läuft, funktioniert es nicht.

In beiden Punkten 3 und 4, wenn ich sage, "funktioniert nicht", ich meine ich eine Ausnahmemeldung von Uncaught (in Versprechen) Fehler: Hash Mismatch (cacheBustedFetchFromNetwork):

Wenn ich versuche, es auf dem Handy gegen Produktion zu überprüfen, sehe ich auch nicht den Update-Flow passiert.

Nachdem ich die Seite wieder aufzufrischen, sehe ich die Änderungen und die Fehlermeldung verschwindet (das Update durchgeführt wurde)

Hier ist der Code, der das Update enthält:

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

Vielleicht bin ich fehlt eine bestimmte Konfiguration für die Domäne, in der ich es in eckig bin?

Answer 1

Ich lief darin und musste meinen Application Cache manuell löschen. Normalerweise würde ich einfach die Schaltfläche "Daten löschen" verwenden, aber aus irgendeinem Grund muss ich den Cache-Speicher öffnen und mit der rechten Maustaste klicken und für jedes Element löschen. Dann wiederhole das 'Add to Desktop'.