How to receive push notification in angularJs web Application with FCM.? - angularjs

Question

I want to show push notification on angular web app when Server sends a message via FCM.
What would be the best way to approach this, is there an Angular plugin for this (which I must admit I cannot find myself).

Answer 1

You should check the Firebase Cloud Messaging Quickstart example. Be careful to include the file firebase-messaging-sw.js in your /dist folder during deployment.

Answer 2

Following Firebase Javascript Web Setup which requires you to do the following all you will have left to do is expose the obejcts and perform the initialization in your appropriate angular artifacts.
Updated 1/28/2019: Make sure you add script tags to get firebase-messaging bundle <script src="https://www.gstatic.com/firebasejs/4.9.0/firebase-messaging.js"></script>
but if you have browserify etc you can following their article and samples fully.
The raw JavaScript is as below:-
<script src="https://www.gstatic.com/firebasejs/4.9.0/firebase.js"></script>
<script>
// Initialize Firebase
// TODO: Replace with your project's customized code snippet
var config = {
apiKey: "<API_KEY>",
authDomain: "<PROJECT_ID>.firebaseapp.com",
databaseURL: "https://<DATABASE_NAME>.firebaseio.com",
storageBucket: "<BUCKET>.appspot.com",
messagingSenderId: "<SENDER_ID>",
};
firebase.initializeApp(config);
</script>
You could do this initialization in your config block - something like below. Remember firebase is a global object.
app.config(function() {
var config = {
apiKey: "<API_KEY>",
authDomain: "<PROJECT_ID>.firebaseapp.com",
databaseURL: "https://<DATABASE_NAME>.firebaseio.com",
storageBucket: "<BUCKET>.appspot.com",
messagingSenderId: "<SENDER_ID>",
};
firebase.initializeApp(config);
});
You can also create background message handler in some service or same config block according to firebase-messaging-sample Here is the gits of it:-
const messaging = firebase.messaging();
// [END initialize_firebase_in_sw]
**/
// If you would like to customize notifications that are received in the
// background (Web app is closed or not in browser focus) then you should
// implement this optional method.
// [START background_handler]
messaging.setBackgroundMessageHandler(function(payload) {
console.log('[firebase-messaging-sw.js] Received background message ', payload);
// Customize notification here
const notificationTitle = 'Background Message Title';
const notificationOptions = {
body: 'Background Message body.',
icon: '/firebase-logo.png'
};
return self.registration.showNotification(notificationTitle,
notificationOptions);
});