Отображение настраиваемой автономной страницы только в angular pwa, когда нет подключения к Интернету

Question

в Angular 9+ я хотел бы добавить настраиваемую автономную страницу (файлы .html и .scss). Я преобразовал свое приложение angular в pwa, выполнив все основные шаги, которые требуются для angular 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 для проверки статуса при каждой попытке маршрутизации. Вероятно, это более простое решение, и защитник маршрута можно будет повторно использовать для всех маршрутов.