当没有可用的互联网连接时，仅在 angular pwa 中显示自定义离线页面

Question

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

网络-checker.component.html（离线页面）

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

Answer 1

您可以创建一个路由守卫，使用 ConnectionService 检查每次尝试路由的状态。这可能是更简单的解决方案，所有路线的路线守卫都是 re-usable。

当没有可用的互联网连接时，仅在 angular pwa 中显示自定义离线页面

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

angular

progressive-web-apps

offline

offline-caching