この記事でやること#
Angular に導入した FCM の Sevice Worker から受け取ったプッシュ通知をコンポーネント側に渡します。
FCM 導入の細かな点については言及しません。
もし導入部分から知りたい方がいましたら、私が参考にした記事が非常にわかりやすくまとめられているので、そちらを参照してください。
Angular 側にプッシュ通知の内容を渡す#
main.ts
import { Component, OnInit } from '@angular/core';
import { AngularFireMessaging } from '@angular/fire/messaging';
@Component({
selector: 'app-main',
templateUrl: './main.component.html',
styleUrls: ['./main.component.scss']
})
export class MainComponent implements OnInit {
constructor(
private messaging: AngularFireMessaging,
) { }
ngOnInit() {
// Angular 側へプッシュデータを渡す
this.messaging.messages
.subscribe( message => { console.log(message); });
}
}
これでコンソールにはサーバ側で送信したプッシュ通知のタイトル、ボディ、データがコンソールに出力されます。