在 localhost 上未收到 Web 的 FCM 推送通知答案

【问题标题】：Not receiving FCM Push Notification for web on localhost在 localhost 上未收到 Web 的 FCM 推送通知
【发布时间】：2018-03-09 19:10:48
【问题描述】：

所以我需要在我们的网络应用程序中实现网络推送通知，我已经在文档的帮助下成功地在我的应用程序中设置了 Firebase 云消息传递，我可以要求用户允许通知权限并获取令牌如果他接受许可，也可以提供 id。

问题是当我尝试发送通知以测试生成的令牌时，我收到消息已发送的响应，但我无法在客户端接收它。

我的 index.html

<head>
  <script src="https://www.gstatic.com/firebasejs/4.4.0/firebase.js"></script>
  <link rel="manifest" href="./firebase.json">
</head>
 <script>
  if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('./firebase-messaging-sw.js').then(function(registration) {
      console.log('Firebase Worker Registered');

    }).catch(function(err) {
      console.log('Service Worker registration failed: ', err);
    });
  }
  </script>

我已经成功注册了 service worker 文件

我的 App.component.ts

var config = {
            apiKey: "somekey",
            authDomain: "someproject-2.firebaseapp.com",
            databaseURL: "https://someproject-2.firebaseio.com",
            projectId: "someproject-2",
            storageBucket: "",
            messagingSenderId: "someid"
          };
          firebase.initializeApp(config);



        const messaging = firebase.messaging();

        messaging.requestPermission()
        .then(function() {
          console.log('Notification permission granted.');
          return messaging.getToken()
        })
        .then(function(result) {
            console.log("The token is: ", result);
        })
        .catch(function(err) {
          console.log('Unable to get permission to notify.', err);
        });

        messaging.onMessage(function(payload) {
        console.log("Message received. ", payload);
        });

我正在获取权限对话框，询问权限并使用此代码获取令牌

我用来发送消息的 curl 代码

curl -X POST -H "Authorization: key=somekey" -H "Content-Type: application/json" -d '{
  "notification": {
    "title": "Portugal vs. Denmark",
    "body": "5 to 1",
    "icon": "firebase-logo.png",
    "click_action": "http://localhost:8081"
  },
  "to": "sometoken"
}' "https://fcm.googleapis.com/fcm/send"

我可以使用此代码成功发送通知

我不知道哪里出错了，可能是因为它在本地主机上？也许 onMessage 方法运行不正常？非常感谢任何帮助！

【问题讨论】：

Service Worker 不能在不安全的来源上工作。所以你的本地主机必须在 https 上。
你找到问题了吗？我也有同样的问题。
不，兄弟，如果我知道了会告诉你的

标签： javascript angular push-notification firebase-cloud-messaging

【解决方案1】：

好的，我在 stackoverflow 上没有得到任何答案，所以我必须自己做并让它工作！

问题出在 service worker 文件中，我显然没有定义消息传递变量。

如果有人遇到此问题，请确保您的 Service Worker 文件看起来像这样。

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

firebase.initializeApp({
    'messagingSenderId': '182145913801'
  });

const messaging = firebase.messaging();

【讨论】：

【解决方案2】：

我遇到了类似的问题，我去了 firebase 上的云消息传递并获取了我的服务器密钥并将其添加到 curl 请求中。

curl --header  "Authorization: key=CloudMessagingServerKey" --header  "Content-Type: application/json" -d '{
     "notification": {
        "title": "FCM Message",
        "body": "This is an FCM Message",
      },
     "to": "token from messaging.getToken()"
     }' "https://fcm.googleapis.com/fcm/send"

我的 firebase-messaging-sw.js 看起来像下面的代码

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

firebase.initializeApp({
  apiKey: 'yourapikey',
  authDomain: 'xxxx.firebaseapp.com',
  databaseURL: 'https://xxxx.firebaseio.com',
  projectId: 'xxxx',
  storageBucket: 'xxxx.appspot.com',
  messagingSenderId: 'your message sender Id',
});

const messaging = firebase.messaging();

这对我有用。我的错误是我使用了错误的 serverKey，并且我没有在 firebase-messaging-sw.js 中使用 importScripts

【讨论】：

谢谢兄弟，我也使用了错误的密钥，而不是服务器密钥，我使用的是 api 密钥。再次感谢！

【解决方案3】：

如 FCM 网站所述：

仅在通过 HTTPS 提供的页面中支持 FCM SDK。这是由于它使用了仅在 HTTPS 站点上可用的服务工作者。

见https://firebase.google.com/docs/cloud-messaging/js/client

【讨论】：

我不这么认为，因为我将更改部署到不是 https 的临时网站上，并且在那里我无法注册我的服务人员本身，收到一个错误，即该网站不是 https但是在本地，我可以注册服务工作者并获取令牌，这表明它可以在 localhost 上运行，我记得 firebase 教程中的那个人自己是在他的 http localhost 上做的
是的，你是对的，因为 localhost 在 chrome 中被列入白名单，我的错误我同意 @ManzurKhanSarguroh
感谢您抽出宝贵时间回答兄弟