Showing a custom offline page only in angular pwa when no internet connection is available

Question

in Angular 9+ i would like to add a custom offline page (.html and .scss file).I have converted my angular app into a pwa by following all basic steps which are required for an angular pwa . But however i'am having trouble with the pwa. I already applied a connection service interface to monitor network connectivity in app.component.ts . the offline page execute when there is no network but the moment i press refresh button the browser refreshes without showing any offline . I want to implement the offline in such a way that if user press the refresh link the browser refresh but also show the same offline page if there is no network. Angular PWA with custom offline page (i tried creating a custom sw.js but it always give me an registration error ).

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 (offline page)

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

Answer 1

You could create a route guard that uses the ConnectionService to check status on each attempt to route. That's probably the easier solution and the route guard would be re-usable for all routes.