인터넷 연결을 사용할 수 없을 때 각도 PWA에서만 사용자 정의 오프라인 페이지 표시

Question

Angular 9+에서 사용자 지정 오프라인 페이지 (.html 및 .scss 파일)를 추가하고 싶습니다. 각 pwa에 필요한 모든 기본 단계를 수행하여 각도 앱을 pwa로 변환했습니다. 그러나 나는 pwa에 문제가 있습니다. 이미 app.component.ts에서 네트워크 연결을 모니터링하기 위해 연결 서비스 인터페이스를 적용했습니다. 네트워크가 없을 때 오프라인 페이지가 실행되지만 새로 고침 버튼을 누르면 브라우저가 오프라인을 표시하지 않고 새로 고쳐집니다. 사용자가 새로 고침 링크를 누르면 브라우저가 새로 고쳐 지지만 네트워크가없는 경우 동일한 오프라인 페이지를 표시하는 방식으로 오프라인을 구현하고 싶습니다. 사용자 정의 오프라인 페이지가있는 Angular PWA (사용자 정의 sw.js를 만들려고 시도했지만 항상 등록 오류가 발생 함).

app.component.ts

constructor( connectionService:ConnectionService) {
            this.conCheck()
           }
conCheck(){
this.connectionService.monitor().subscribe( conn => {
  this.isConnection = conn;
  if(this.isConnection){
    this.util.showSuccess("You are Connected.")
  }else{
    this.util.showError("Please check your internet connection.")
  }
})

app.component.html

<div *ngIf="isConnection ; else offline">
<router-outlet></router-outlet></div>
<ng-template #offline>
<app-network-checker></app-network-checker></ng-template>

ngsw-config.json

"files": [
      "/favicon.ico",
      "/*.css",
      "/*.js",
      "/assets/offline.html"
    ]

app.module.ts

imports: [
  ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production , registrationStrategy:"registerImmediately" })

network-checker.component.html (오프라인 페이지)

<main>
<a href="#">refresh</a>
</maine>

Answer 1

ConnectionService를 사용하여 라우팅을 시도 할 때마다 상태를 확인하는 경로 가드를 만들 수 있습니다. 이것이 아마도 더 쉬운 해결책 일 것이고 경로 가드는 모든 경로에서 재사용이 가능할 것입니다.