要捕获AngularFire后台通知,您可以使用Firebase的Cloud Messaging服务。下面是一个使用AngularFire和Firebase Cloud Messaging的代码示例:
npm install firebase @angular/fire --save
messaging.service.ts
服务文件,并添加以下代码:import { Injectable } from '@angular/core';
import { AngularFireMessaging } from '@angular/fire/messaging';
import { BehaviorSubject } from 'rxjs'
@Injectable()
export class MessagingService {
currentMessage = new BehaviorSubject(null);
constructor(private angularFireMessaging: AngularFireMessaging) {
this.angularFireMessaging.messaging.subscribe(
(_messaging) => {
_messaging.onMessage = _messaging.onMessage.bind(_messaging);
_messaging.onTokenRefresh = _messaging.onTokenRefresh.bind(_messaging);
}
)
}
requestPermission() {
this.angularFireMessaging.requestToken.subscribe(
(token) => {
console.log(token);
// 在这里将token发送到服务器,以便后台通知时使用
},
(err) => {
console.error('Unable to get permission to notify.', err);
}
);
}
receiveMessage() {
this.angularFireMessaging.messages.subscribe(
(payload) => {
console.log("new message received. ", payload);
this.currentMessage.next(payload);
}
);
}
}
app.module.ts
文件中,将AngularFireMessaging
添加到providers
数组中:import { AngularFireMessagingModule } from '@angular/fire/messaging';
import { AngularFireModule } from '@angular/fire';
import { environment } from 'src/environments/environment';
import { MessagingService } from './messaging.service';
@NgModule({
imports: [
AngularFireModule.initializeApp(environment.firebase),
AngularFireMessagingModule
],
providers: [MessagingService]
})
export class AppModule { }
MessagingService
来请求权限并接收后台通知。例如,在app.component.ts
中:import { Component, OnInit } from '@angular/core';
import { MessagingService } from './messaging.service';
@Component({
selector: 'app-root',
template: `
{{ msg }}
`
})
export class AppComponent implements OnInit {
message;
constructor(private messagingService: MessagingService) { }
ngOnInit() {
this.messagingService.receiveMessage();
this.message = this.messagingService.currentMessage;
}
requestPermission() {
this.messagingService.requestPermission();
}
}
以上代码演示了如何在Angular中使用AngularFire和Firebase Cloud Messaging来捕获后台通知。当用户点击“Request Permission”按钮时,将请求权限并将令牌发送给后端。当收到新的消息时,将在页面上显示该消息。
请注意,您还需要在Firebase控制台上配置Cloud Messaging服务,并将服务器密钥和发送者ID添加到Angular项目的环境变量中。
下一篇:捕获按键按下/松开事件