没有互联网连接时，仅以角度pwa显示自定义的离线页面

问题描述

在Angular 9+中，我想添加一个自定义的脱机页面（.html和.scss文件）。我已按照angular pwa所需的所有基本步骤将我的angular应用程序转换为pwa。 但是我在使用pwa时遇到了麻烦。我已经应用了连接服务接口来监视app.component.ts中的网络连接。在没有网络的情况下执行脱机页面，但是当我按刷新按钮时，浏览器刷新而没有显示任何脱机。我想以这样一种方式实现脱机：如果用户按下刷新链接，浏览器将刷新，但如果没有网络，也将显示相同的脱机页面。 Angular PWA with custom offline page（我尝试创建自定义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>

解决方法

您可以创建一个路由保护，该路由保护使用ConnectionService来检查每次尝试路由的状态。这可能是更简单的解决方案，并且路由防护将可在所有路由上重复使用。