채팅 수신시 푸시 알림 만들기

Question

2 번과 Firebase에 상당히 익숙하지만 채팅 앱 here을 생성 할 수있었습니다. 채팅 앱에 새 메시지가있을 때 푸시 알림을 만드는 것이 최종 목표입니다.

1. 나는 this를 설치하려하지만 난이 문서를 이해하지 수 있기 때문에 매우 어렵다.

2. this thread에서 해결책을 시도했습니다. 하지만 앱은 알림을 감지하지 못합니다.

이 권한에 접근하는 방법에 대한 도움이 필요하십니까? , 당신의 구성 요소의 메시지 데이터베이스에 등록 할

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

이 내 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 파일이 포함되어 있습니다. 푸시 알림에 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; 
      } 
     }); 
    } 
}