チャットを受け取ったときにプッシュ通知を作成する

Question

私は角度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; 
      } 
     }); 
    } 
}