Özel bir çevrimdışı sayfayı yalnızca internet bağlantısı olmadığında açısal pwa ile gösterme

Question

Angular 9+ sürümünde özel bir çevrimdışı sayfa eklemek istiyorum (.html ve .scss dosyası). Açısal bir pwa için gerekli olan tüm temel adımları izleyerek açısal uygulamamı bir pwa'ya dönüştürdüm. Ama yine de pwa ile sorun yaşıyorum. App.component.ts'de ağ bağlantısını izlemek için zaten bir bağlantı hizmeti arayüzü uyguladım. çevrimdışı sayfa ağ olmadığında yürütülüyor, ancak yenile düğmesine bastığım anda tarayıcı çevrimdışı görünmeden yenileniyor. Çevrimdışını öyle bir şekilde uygulamak istiyorum ki, kullanıcı yenile bağlantısına basarsa tarayıcının yenilenmesi, ancak ağ yoksa aynı çevrimdışı sayfayı da göstermesi. Özel çevrimdışı sayfalı açısal PWA (özel bir sw.js oluşturmayı denedim, ancak bana her zaman bir kayıt hatası veriyor).

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 (çevrimdışı sayfa)

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

Answer 1

Her yönlendirme denemesinde durumu kontrol etmek için Bağlantı Hizmetini kullanan bir yol koruyucusu oluşturabilirsiniz. Muhtemelen bu daha kolay çözümdür ve rota koruması tüm rotalar için yeniden kullanılabilir olacaktır.