如何使用FCM在angularJs Web应用程序中接收推送通知

Question

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

Answer 1

您应该查看 Firebase Cloud 消息快速入门示例。在部署期间，请务必将 firebase-messaging-sw.js 文件包含在/dist 文件夹中。

Answer 2

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

2019 年 1 月 28 日更新：请务必添加脚本代码以获取 Firebase 消息捆绑包<script src="https://www.gstatic.com/firebasejs/4.9.0/firebase-messaging.js"></script> 但是，如果您有浏览器化等，则可以完全遵循他们的文章和示例。

原始 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 在某些服务或相同的配置块中创建后台消息处理程序 这是它的 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);
});