angular - 在接收聊天时创建推送通知

Question

我是 Angular 2 和 Firebase 的新手，但我设法创建了一个聊天应用程序 here我的最终目标是在聊天应用程序中有新消息时创建推送通知。

1. 我尝试安装 this但这很难，因为我看不懂文档。

2. 我尝试了 this thread 中的解决方案以及。但该应用程序不会检测到通知。

对如何正确处理此问题有任何帮助吗？

这是我的 app.component.ts

import { Component } from '@angular/core';
import { AngularFire, AuthProviders, AuthMethods, FirebaseListObservable } from 'angularfire2';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

 export class AppComponent {
  items: FirebaseListObservable<any>;
  name: any;
  msgVal: string = '';

    constructor(public af: AngularFire) {
        this.items = af.database.list('/messages', {
          query: {
            limitToLast: 5
          }
        });

        this.af.auth.subscribe(auth => { 
          if(auth) {
            this.name = auth;
          }
        });
    }

login() {
    this.af.auth.login({
      provider: AuthProviders.Facebook,
      method: AuthMethods.Popup,
    });
   }

chatSend(theirMessage: string) {
      this.items.push({ message: theirMessage, name: this.name.facebook.displayName});
      this.msgVal = '';
  }

mychange(){
   console.log("change happned"); // updated value
  }
 }

我的 app.module 文件包含，

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { AppComponent } from './app.component';
import { AngularFireModule} from 'angularfire2';
import {initializeApp,database} from 'firebase';

export const firebaseConfig = {
   apiKey: "AIzaSyAQUetWt-pH-WuMTZ-lonP2ykICOl4KiPw",
   authDomain: "anguchat-eb370.firebaseapp.com",
   databaseURL: "https://anguchat-eb370.firebaseio.com",
   storageBucket: "anguchat-eb370.appspot.com",
   messagingSenderId: "267732203493"
};

initializeApp(firebaseConfig);
database().ref().on('value', function(snapshot){
  var x = snapshot.val()
  console.log("This prints whenever there is a new message");
});

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    AngularFireModule.initializeApp(firebaseConfig)
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Answer 1

我会订阅您组件中的消息数据库。如果你想使用 this用于推送通知。您必须在模块中导入 PushNotificationsModule，在组件中导入 PushNotificationsService。

在推送通知工作之前，用户必须接受 them .

组件

import { Component } from '@angular/core';
import { AngularFire, AuthProviders, AuthMethods, FirebaseListObservable } from 'angularfire2';
import { PushNotificationsService } from 'angular2-notifications';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

 export class AppComponent {
  items: FirebaseListObservable<any>;
  name: any;
  msgVal: string = '';

    constructor(
      public af: AngularFire,
      private _pushNotifications: PushNotificationsService) {

        this._pushNotifications.requestPermission(); // requestion permission for push notification

        this.items = af.database.list('/messages', {
          query: {
            limitToLast: 5
          }
        });

        af.database.list('/messages', {
          query: {
            limitToLast: 1
          }
        }).subscribe((messages: Array<any>) => {
          // get the last message from messages array
          this._pushNotifications.create('some title', { body: 'body text' }).subscribe(
            res => {
              // do something
            },
            err => {
              // do something
            }
          );
       });

        this.af.auth.subscribe(auth => { 
          if(auth) {
            this.name = auth;
          }
        });
    }
 }