Mostrando uma página off-line personalizada apenas em pwa angular quando não houver conexão com a Internet disponível

Aug 18 2020

no Angular 9+, gostaria de adicionar uma página offline personalizada (arquivo .html e .scss). Converti meu aplicativo angular em um pwa, seguindo todas as etapas básicas necessárias para um pwa angular. Mas, no entanto, estou tendo problemas com o pwa. Já apliquei uma interface de serviço de conexão para monitorar a conectividade de rede em app.component.ts. a página offline é executada quando não há rede, mas no momento em que pressiono o botão Atualizar, o navegador é atualizado sem mostrar nenhum offline. Quero implementar o off-line de forma que se o usuário pressionar o link de atualização o navegador será atualizado, mas também exibir a mesma página off-line se não houver rede. PWA angular com página off-line personalizada (tentei criar um sw.js personalizado, mas sempre recebo um erro de registro).

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 (página offline)

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

Respostas

TheJames Aug 18 2020 at 17:40

Você pode criar um protetor de rota que usa o ConnectionService para verificar o status em cada tentativa de rota. Essa é provavelmente a solução mais fácil e o protetor de rota seria reutilizável para todas as rotas.