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

Question

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

Answer 1

Firebase Javascript Web 设置要求您执行以下操作，您剩下要做的就是公开对象并在适当的角度工件中执行初始化。

更新于 1/28/2019：确保添加脚本标签以获取 firebase-messaging 捆绑包<script src="https://www.gstatic.com/firebasejs/4.9.0/firebase-messaging.js"></script> ，但如果您有 browserify 等，您可以完全遵循他们的文章和示例。

原始 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>

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

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

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

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