推送通知在带有 firebase 的 Angular 7 应用程序中不起作用答案

【问题标题】：Push notification not working in Angular 7 app with firebase推送通知在带有 firebase 的 Angular 7 应用程序中不起作用
【发布时间】：2019-08-19 00:12:28
【问题描述】：

我已按照此链接进行集成 https://medium.com/@a.adendrata/push-notifications-with-angular-6-firebase-cloud-massaging-dbfb5fbc0eeb

这里是 firebase-messaging-sw.js

importScripts('https://www.gstatic.com/firebasejs/3.9.0/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/3.9.0/firebase-messaging.js');

// Initialize the Firebase app in the service worker by passing in the
// messagingSenderId.
firebase.initializeApp({
  'messagingSenderId': '426004542538'
});

// Retrieve an instance of Firebase Messaging so that it can handle background
// messages.
const messaging = firebase.messaging();

下面是包含配置信息的环境文件

export const environment = {
  production: false,
  firebase: {
    apiKey: "AIzaSyBvhz9Ml0Nd68SR8BRDxO10q6Hyptcnrjk",
    authDomain: "pushnotification-7fd02.firebaseapp.com",
    databaseURL: "https://pushnotification-7fd02.firebaseio.com",
    projectId: "pushnotification-7fd02",
    storageBucket: "pushnotification-7fd02.appspot.com",
    messagingSenderId: "426004542538"
  }
};

在邮递员中，我使用 curl 命令进行 firebase

curl -X POST \
  https://fcm.googleapis.com/fcm/send \
  -H 'Authorization: key=AAAAYy_ZdEo:AP..........' \
  -H 'Content-Type: application/json' \
  -d '{ 
 "notification": {
  "title": "Hello World", 
  "body": "This is Message from Admin"
 },
 "to" : "fDFFOme2rEI:APA91bHnZGmt6ae5Jyuv2vI4WGBOg3XKMwtHpZIFAYa9slacU9Uvam_7OHSUs0k_TFwRqDZFwZ6WF2IqdOH7Mj1u6BSbunsPuYxeH1zFivnPYfQoZfxqbSkxQYDMDoO21xjUpSDWxqbp"
}'

邮递员的反应是

{
    "multicast_id": 4927361125379832815,
    "success": 1,
    "failure": 0,
    "canonical_ids": 0,
    "results": [
        {
            "message_id": "0:1553764018334820%2fd9afcdf9fd7ecd"
        }
    ]
}

虽然邮递员的响应是 200 成功，但数据仍然没有存储在 firebase 中并且我没有收到任何推送通知。我正在运行 ng serve --port 3000，它部署在 localhost:3000 上。

【问题讨论】：

标签： firebase push-notification angular6 angular-service-worker

【解决方案1】：

请将您的 firebase-messaging-sw.js 更改为此，我认为它将运行

     importScripts('https://www.gstatic.com/firebasejs/3.9.0/firebase-app.js');
     importScripts('https://www.gstatic.com/firebasejs/3.9.0/firebase-messaging.js');
      var config = {
       apiKey: ..... ,
       authDomain: .....,
       databaseURL: .....,
       projectId: .....,
       storageBucket: .....,
       messagingSenderId: .....
          };
      firebase.initializeApp(config);
      const messaging = firebase.messaging();

或者如果你想自定义通知显示，那么在上面的代码之后也可以使用它

       messaging.setBackgroundMessageHandler(function(payload) {
       const title = payload.data.title;
        const option = {              
          body: payload.data.message 
          icon: 'Path' 
          }  
             return self.registration.showNotification(title,option);
            });

【讨论】：

【解决方案2】：

我在文件中找到了将 firebase 的版本从 3.0.0 更改为 7.0.0 所需的解决方案 importScripts ('https://www.gstatic.com/firebasejs/7.0.0/firebase-app.js'); importScripts('https://www.gstatic.com/firebasejs/7.0.0/firebase-messaging.js');

文件是 firebase-messaging-sw.js

【讨论】：

【解决方案3】：

将fire和firebase的包版本更改为“@angular/fire”：“^5.0.0”和“firebase”：“^5.5.0”。它会解决这个问题。

【讨论】：