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

Question

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

Answer 1

您应该查看 Firebase Cloud Messaging Quickstart 示例。请注意在部署期间将文件 firebase-messaging-sw.js 包含在 /dist 文件夹中。

Answer 2

在Firebase Javascript Web Setup 之后，您需要执行以下所有操作，即公开对象并在适当的角度工件中执行初始化。

2019 年 1 月 28 日更新：确保添加脚本标签以获取 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在某些服务或相同的配置块中创建后台消息处理程序@这是它的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);
});