Geek Answers Handbook

How to get push notification in angularJs web application using FCM.?

I want to show a push notification on a corner web application when the Server sends a message through FCM. What would be the best way to get closer to this, is there an Angular plugin for this (which I have to admit I can't find myself).

+9
angularjs firebase-cloud-messaging
source share
2 answers

Following the Firebase Javascript Web Setup, which requires you to do the following, all you have to do is set objects and initialize in your corresponding corner artifacts.

Updated 01.28.2009 : Make sure you add script tags to receive the Firebase <script src="https://www.gstatic.com/firebasejs/4.9.0/firebase-messaging.js"></script> message package but if you have browserify, etc., you can fully follow their article and samples.

Raw javascript as below:

 <script src="https://www.gstatic.com/firebasejs/4.9.0/firebase.js"></script> <script> // Initialize Firebase // TODO: Replace with your project 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 can do this initialization in your configuration block - something like below. Remember that 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 a background message handler in some service or in the same configuration block in accordance with firebase-messaging-sample. Here are his examples : -

  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); });
0
source share

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

0
source share

More articles:


All Articles