Creating a push notification on receiving chat

Question

I am fairly new to angular 2 and Firebase but i managed to create a chat app here and my end goal is to create a push notification when there is a new message in the chat app.

1. I tried installing this but it is very difficult as i couldn't understand the document.

2. I tried the solution from this thread as well. but the app wont detect the Notification.

Any help on how to approach this right?

this is my 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
  }
 }

and my app.module file contains,

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

I would subscribe to the messages database in your component. If you want to use this for push notifications. You will have to import PushNotificationsModule in your module and PushNotificationsService in your component.

before the push nofications work, user has to accept them.

Component

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;
          }
        });
    }
 }