收到推送通知后更新网页

Question

我创建了一个示例pwa angular应用程序。我在使用Firebase时集成了推送通知。到目前为止，我可以在后台运行应用程序时接收推送通知。如果该应用程序已经在前台，那么我在更新网页时会遇到困难。

到目前为止，这是我的代码

app.component.html

    <mat-toolbar color="primary">
  <mat-toolbar-row>
    <span>JS-jargon</span>
  </mat-toolbar-row>
</mat-toolbar>
<main>
  Current Message:
  <h1>{{(message | async)?.notification.title}}</h1>
  <img [src]="(message | async)?.notification.icon" width="100px">
  <p>{{(message | async)?.notification.body}}</p>


  {{ message | async | json }}
  <mat-card *ngFor="let item of items">
    <mat-card-header>
     <mat-card-title>{{item.name}}</mat-card-title>
    </mat-card-header>
    <mat-card-content>
     {{item.description}}
    </mat-card-content>
    <mat-card-actions>
     <a mat-raised-button href="{{item.url}}" color="primary">More</a>
    </mat-card-actions>
  </mat-card>
</main>

app.component.ts

import { Component, OnInit } from '@angular/core';
import { Item, ApiService } from './services/api.service';
import { MessagingService } from "./shared/messaging.service";


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit{


  message;
  title = 'firstpwa';
  items: Array<Item>;
  constructor(private messagingService: MessagingService, private apiService: ApiService) {}
  ngOnInit() {
    this.fetchData();
    const userId = 'user001';
    this.messagingService.requestPermission(userId)
    this.messagingService.receiveMessage()
    this.message = this.messagingService.currentMessage
  }
  fetchData() {
    this.apiService.fetch().subscribe(
      (data: Array<Item>) => {
         console.log(data);
         this.items = data;
      }, (err) => {
        console.log(err);
      }
    );
  }
}

这是我使用邮递员发送通知的方式