Visualizzazione di una pagina offline personalizzata solo in pwa angolare quando non è disponibile una connessione Internet

Aug 18 2020

in Angular 9+ vorrei aggiungere una pagina offline personalizzata (file .html e .scss) .Ho convertito la mia app angular in una pwa seguendo tutti i passaggi di base necessari per un pwa angolare. Ma comunque ho problemi con il pwa. Ho già applicato un'interfaccia del servizio di connessione per monitorare la connettività di rete in app.component.ts. la pagina offline viene eseguita quando non è presente una rete ma nel momento in cui premo il pulsante di aggiornamento il browser si aggiorna senza mostrare alcun offline. Voglio implementare l'offline in modo tale che se l'utente preme il collegamento di aggiornamento il browser si aggiorna ma mostra anche la stessa pagina offline se non c'è rete. PWA angolare con pagina offline personalizzata (ho provato a creare un sw.js personalizzato ma mi dà sempre un errore di registrazione).

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

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

Risposte

TheJames Aug 18 2020 at 17:40

È possibile creare un route guard che utilizzi ConnectionService per controllare lo stato a ogni tentativo di instradamento. Questa è probabilmente la soluzione più semplice e la protezione del percorso sarebbe riutilizzabile per tutti i percorsi.