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

2023-08-02前端开发问题

本文介绍了在 localhost 上未收到 Web 的 FCM 推送通知的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着跟版网的小编来一起学习吧！

问题描述

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

So I need to implement web push notifications in our web app, I have successfully setup the firebase cloud messaging in my app with the help of docs, I'm able to ask the user to allow permission for notifications and get the token id as well if he accepts the permission.

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

The thing is when I try to send a notification to test to the generated token, I'm getting a response that the message is sent, but I'm not able to receive it on the client side.

我的 index.html

My 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 文件

I'm successfully able to register the service worker file

我的 App.component.ts

My 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);
        });

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

I'm getting the permission dialog box asking permission and getting a token with this code

我用来发送消息的 curl 代码

The curl code I used to send messages

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"

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

I'm able to successfully send notifications with this code

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

I can't figure out where I'm going wrong, maybe because it's on localhost? maybe the onMessage method is not running properly? Any help is highly appreciated!

推荐答案

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

Alright, I didn't get any answers for this on stackoverflow, so I have to do it on my own and got it working!

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

The problem was in the service worker file, I have apparently not defined messaging variable.

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

If anybody is facing this issue, just make sure your service worker file looks something like this.

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();

这篇关于在 localhost 上未收到 Web 的 FCM 推送通知的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！

The End

相关推荐

js删除数组中指定元素的5种方法

JavaScript小数运算出现多位的解决办法

JavaScript(js)文件字符串中丢失＂\＂斜线的解决方法

layui中table列表增加属性 edit=＂date＂，不生效怎么办？

Rails/Javascript:如何将 rails 变量注入(非常)简单的 javascript

CoffeeScript 总是以匿名函数返回

热门文章

热门精品源码

最新VIP资源