インターネット接続が利用できない場合にAngularpwaでのみカスタムオフラインページを表示する

Aug 18 2020

Angular 9以降では、カスタムオフラインページ(.htmlおよび.scssファイル)を追加したいと思います。Angularpwaに必要なすべての基本的な手順に従って、AngularアプリをPWAに変換しました。しかし、しかし私はpwaに問題を抱えています。app.component.tsでネットワーク接続を監視するために接続サービスインターフェイスをすでに適用しました。オフラインページはネットワークがないときに実行されますが、更新ボタンを押すと、ブラウザはオフラインを表示せずに更新されます。ユーザーが更新リンクを押すとブラウザが更新されるようにオフラインを実装したいのですが、ネットワークがない場合は同じオフラインページも表示されます。カスタムオフラインページを使用したAngularPWA(カスタム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>

回答

TheJames Aug 18 2020 at 17:40

ConnectionServiceを使用して、ルーティングを試行するたびにステータスを確認するルートガードを作成できます。これはおそらくより簡単な解決策であり、ルートガードはすべてのルートで再利用できます。