如何使用FCM在angularJs web Appication中接收推送通知。

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). Thanks in advance.

我想在服务器通过FCM发送消息时在角度Web应用程序上显示推送通知。什么是最好的方法来解决这个问题，是否有一个Angular插件（我必须承认我找不到自己）。提前致谢。

1 个解决方案

#1

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.

按照Firebase Javascript Web Setup要求您执行以下操作，您将要做的就是公开obejcts并在适当的角度工件中执行初始化。

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.

确保添加脚本标记以获取firebase-messaging bundle

The raw JavaScript is as below:-

原始JavaScript如下： -

<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.

您可以在配置块中执行此初始化 - 如下所示。记住firebase是一个全局对象。

app.config(function() { var config = { apiKey: "", authDomain: ".firebaseapp.com", databaseURL: "https://.firebaseio.com", storageBucket: ".appspot.com", messagingSenderId: "", }; firebase.initializeApp(config); });

app.config（function（）{var config = {apiKey：“”，authDomain：“。firebaseapp.com”，databaseURL：“https：//.firebaseio.com”，storageBucket：“。appspot.com”，messagingSenderId： “”，}; 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:-

您还可以根据firebase-messaging-sample在某些服务或相同的配置块中创建后台消息处理程序以下是它的gits： -

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

#1