Обновление веб-страницы после получения уведомления pu sh - PullRequest
0 голосов
/ 29 января 2020

Я создал пример приложения pwa angular. Я интегрировал уведомление pu sh при использовании firebase. Пока я могу получать уведомления pu sh, пока приложение находится в фоновом режиме. У меня возникают проблемы с обновлением моей веб-страницы, если приложение уже находится на переднем плане.

На данный момент это мой код

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);
      }
    );
  }
}

Так я отправляю уведомление с помощью почтальона image

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...