PWA 업데이트를 프로덕션 환경에서 IIS에 배포 한 후 "해시 불일치"오류가 발생했습니다.

Question

PWA가 anger5로 작성되어 작업 중입니다. 내가 사용하고 있습니다 : "@ angular/cli": "1.6.0-rc.1". "@ angular/language-service": "^ 5.0.0",

사용자에게 응용 프로그램에 대한 업데이트를 알리고 페이지를 새로 고침하고 싶습니다.

1. 내가 HTTP 서버가 출력 폴더에 듣고 로컬 코드를 실행하면 잘 작동하고 나는 사용자에 대한 업데이트 흐름 확인 메시지를 참조하십시오.

2. localhost를 사용하여 IIS에서 로컬로 응용 프로그램을 실행할 때 제대로 작동하며 사용자에 대한 업데이트 흐름과 확인 메시지가 표시됩니다.

3. 특정 도메인 (IIS의 응용 프로그램에 바인딩 된 호스트 파일에서 편집 됨)을 사용하여 응용 프로그램을 로컬로 실행하면 작동하지 않습니다.

4. 프로덕션 환경에서 앱을 실행하면 작동하지 않습니다. 두 점 3과 4에서

, 내가, 내가 (약속을) 처리되지 않는 오류의 예외 메시지가 얻을 의미 "작동하지 않습니다"라고 : 해시 불일치 (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

이 문제가 발생하여 수동으로 애플리케이션 캐시를 비워야했습니다. 일반적으로 Clear Site Data 버튼을 사용 하겠지만 캐시 스토리지를 열고 마우스 오른쪽 버튼을 클릭하여 각 항목을 삭제해야하는 이유가 있습니다. 그런 다음 '바탕 화면에 추가'를 다시 실행하십시오.