javascript - 在本地主机上未收到 Web 的 FCM 推送通知

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

所以我需要在我们的网络应用程序中实现网络推送通知,我已经在文档的帮助下成功地在我的应用程序中设置了 firebase 云消息传递,我可以请求用户允许通知权限并获取 token id 以及他是否接受许可。

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

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

我收到权限对话框询问权限并使用此代码获取 token

我用来发消息的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 方法没有正常运行?非常感谢任何帮助!

最佳答案

好吧,我在 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();

关于javascript - 在本地主机上未收到 Web 的 FCM 推送通知,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46462400/

相关文章:

javascript - 当在带有表情符号的字符串上使用 es6 扩展运算符时,数组中的 "Holes"

javascript - jQuery 找不到自定义标签

javascript - 上传图片并显示预览

javascript - 使用在 TypeScript 的其他模块中声明的别名调用函数

ios - 当我在 Xcode 9 中编译我的应用程序时出现 BoringSSL 错误

iOS 推送通知优先级

android - 无法在 Trigger.io Android 应用程序上启动接收器 com.parse.ParseBroadcastReceiver

javascript - 刷新 DIV 中的内容

html - 在不知道原始颜色的情况下在悬停时减轻 svg 部分

javascript - 使用 urllib2 指示 Python 单击按钮