FCM setup for push notification in angular 6 web app

Question

I am trying to integrate fcm in my angular 6.

Here is what i have done.

firebase-messaging-sw.js

importScripts('https://www.gstatic.com/firebasejs/3.9.0/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/3.9.0/firebase-messaging.js');

firebase.initializeApp({
  'messagingSenderId': '93480234033'
});

const messaging = firebase.messaging();

push-notification.js

import firebase from 'firebase';

export const askForPermissioToReceiveNotifications = async () => {

  try {
    const messaging = firebase.messaging();
    console.log('000ooppp', messaging)
    messaging.requestPermission()
      .then(function(){
    console.log('I am in here');

    return messaging.getToken()
  .then(function(currentToken) {
    console.log(currentToken);
  })

    }).catch(function(err) {
      console.log('Unable to get permission to notify.', err);
    });
  } catch (error) {
    console.error(error);
  }
}

these two files are in src folder.

i have created an app on firebase console and i have got the config object

config: {
    apiKey: "*****",
    authDomain: "*****",
    databaseURL: "*****",
    projectId: "*****",
    storageBucket: "*****",
    messagingSenderId: "*****"
  }

And in my app.module.ts file i am initialising firebase with the above object

import { AngularFireModule } from 'angularfire2';
import { ServiceWorkerModule } from '@angular/service-worker';

and then in import

imports: [
    ...
    ... 
    AngularFireModule.initializeApp(environment.firebase),
    ServiceWorkerModule.register('/combined-worker.js', { enabled: environment.production })
    ...
    ...
]

and in app.component.ts

import { askForPermissioToReceiveNotifications } from './../push-notification';


ngOnInit () {
    console.log('pop')
    askForPermissioToReceiveNotifications();
  }

what i want to do is when user lands on the page and he allows notification to be shown to him, a unique device token id should be generated for that particular user, how can i generate device token id when he clicks on show notification?

getting this error in console

Firebase: No Firebase App '[DEFAULT]' has been created - call Firebase App.initializeApp() (app/no-app)

Not sure you are calling initializeApp in the right place. Please review github.com/angular/angularfire2/blob/master/docs/… — Arthur Thompson

Francisco Sales Francisco Sales · Accepted Answer · 2018-10-16T17:02:44

src/firebase-messaging-sw.js

importScripts('https://www.gstatic.com/firebasejs/4.8.1/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/4.8.1/firebase-messaging.js');

var config = {
  apiKey: "",
  authDomain: "",
  databaseURL: "",
  projectId: "",
  storageBucket: "",
  messagingSenderId: ""
};
firebase.initializeApp(config);

const messaging = firebase.messaging();

now in app.module.ts

import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {AppComponent} from './app.component';
import { AngularFireModule } from 'angularfire2';
import { AngularFireMessagingModule } from 'angularfire2/messaging';

const config = {
  apiKey: '',
  authDomain: '',
  databaseURL: '',
  projectId: '',
  storageBucket: '',
  messagingSenderId: ''
};

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    AngularFireModule.initializeApp(config),
    AngularFireMessagingModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule {
}

inside your component that yout want to require permission to send notification:

    import {Component, OnInit} from '@angular/core';
    import { AngularFireMessaging } from 'angularfire2/messaging';
    import { mergeMapTo } from 'rxjs/operators';

    export class HomeComponent implements OnInit {

        constructor(private _messaging: AngularFireMessaging) {

        }

        ngOnInit() {
            /* request permission */
            this._messaging.requestPermission
            .pipe(mergeMapTo(this._messaging.tokenChanges))
            .subscribe(token => {
              console.log(token);
            }, err => console.log(err));

            /* listen for messages */
            this._messaging.messages.subscribe((message: {notification}) => { 
               console.log(message.notification.title);
               console.log(message.notification.body);
             });
        }
    }

Remember that there 2 ways receiving push notifications
1) when the app is open:
    you'll have to handle it showing the message  
2) when the app is closed:
    the browser handle it for you

FCM setup for push notification in angular 6 web app

2 Answers