当前位置: 首页 > 知识库问答 >
问题:

vue pwa与Firebase云消息传递不正常工作

崔宇
2023-03-14

我尝试以下代码:

    navigator.serviceWorker.register('service-worker.js')
      .then((registration) => {
        const messaging = firebase.messaging().useServiceworker(registration)
        console.log(messaging)
        messaging.requestPermission().then(function () {
          console.log('Notification permission granted.')
          messaging.getToken().then(function (currentToken) {
            if (currentToken) {
              console.log(currentToken)
            }
          })
        })
      })

我的清单:

{
  "name": "Herot-Eyes",
  "short_name": "herot-eyes",
  "gcm_sender_id": "103953800507",
  "icons": [
    {
      "src": "/static/img/icons/herot-eyes-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/static/img/icons/herot-eyes-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    },
    {
      "src": "/static/img/icons/apple-touch-icon-180x180.png",
      "sizes": "180x180",
      "type": "image/png"
    }
  ],
  "start_url": "/",
  "display": "fullscreen",
  "orientation": "portrait",
  "background_color": "#000000",
  "theme_color": "#2196f3"
}

出什么问题了?我的console.log(消息)返回出厂错误,如下所示:

bad-pus-set:"用于存储/查找的FCM推送集不是有效的推送集字符串。"坏范围

“服务工作者作用域必须是至少包含一个字符的字符串。”发件人id错误

“请确保在传递到firebase.initializeApp()的选项中正确设置了'messagingSenderId'。订阅错误。”

“订阅必须是有效的PushSubscription。”错误的令牌:“用于存储/查找的FCM令牌不是有效的令牌字符串。”错误的vapid密钥

“公共VAPID密钥不是具有65字节的Uint8Array。”需要bg处理程序函数

"setBackground MessageHandler()的输入必须是一个函数."delete-acor-not-找到

“由于找不到服务工作程序作用域,无法执行删除尝试。”找不到删除令牌

"无法执行令牌的删除尝试,因为找不到令牌。"

“无法删除无效密钥。”serviceworker注册失败

msgstr"我们无法注册默认的服务工作人员。{$BrowserErrorMessage}"未能删除令牌

"无法删除当前保存的令牌。"获取-订阅-失败

“尝试获取任何现有推送订阅时出错。”gcm发件人id不正确

"请将Web应用清单的gcm_sender_id值更改为103953800507,以便使用Firebase消息传递。"

"您必须将有效的令牌传递到deleteToken(),即getToken()中的令牌。"

"公共VAPID密钥必须是字符串。"无效保存令牌

"无法访问已保存令牌的详细信息。"no-fcm-令牌-用于重新订阅

“找不到FCM令牌,因此无法重新订阅。下次访问时必须重新订阅用户。”注册中没有软件

“尽管服务工作者注册成功,但访问服务工作者本身时出现问题。”没有窗口客户端发送消息

"试图向不存在的窗口客户端发送消息。"通知被阻止

“通知已被阻止。”仅在软件中可用

“此方法在服务工作者上下文中可用。”仅在窗口中可用

"此方法在Windows上下文中可用。"权限被阻止

“所需权限未被授予,而是被阻止。”默认权限

“解密时,公钥不等于65字节。”应重写

“此方法应被扩展类覆盖。”sw reg reg RE冗余

"被用来推动的服务人员被裁员了."sw-注册-预期

“服务工作者注册是预期的输入。”令牌订阅失败

“将用户订阅到FCM时出现问题:{$message}”令牌订阅无推送集

“获取FCM令牌时,FCM返回无效响应。”令牌订阅无令牌

“FCM在订阅用户推送时未返回任何令牌。”令牌取消订阅失败

msgstr"从FCM取消订阅用户时出现问题:{$消息}"令牌更新失败

msgstr"从FCM更新用户时出现问题:{$消息}"Token-update-no-Token

“FCM在更新要推送的用户时未返回令牌。”无法重新订阅

“为推送消息重新订阅FCM令牌时出错。下次访问时必须重新订阅用户。{$message}”不支持的浏览器

“此浏览器不支持使用firebase SDK所需的API。”在获取令牌之前使用sw

"在调用getToken()之前,必须调用useServiceWorker(),以确保使用了Service Worker。"

共有1个答案

孟开宇
2023-03-14

在公用文件夹中,将以下行添加到manifest.json:

{
    //...manifest properties
    "gcm_sender_id": "103953800507" <--- add this line to the file
}

注意:如果项目不是使用Vue Cli创建的,请手动创建manifest.json文件。(感谢@natghi)

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 = {
  messagingSenderId: <Sender ID>
};
firebase.initializeApp(config);

let messaging = firebase.messaging();

在main.js文件中添加以下代码

var config = {
  apiKey: <API_KEY>,
  authDomain: <DOMAIN>,
  databaseURL: <DATABASE_URL>,
  projectId: <PROJECT_ID>,
  storageBucket: <STORAGE_BUCKET>,
  messagingSenderId: <SENDER_ID>
};
firebase.initializeApp(config);

Vue.prototype.$messaging = firebase.messaging()

navigator.serviceWorker.register('/firebase-messaging-sw.js')
  .then((registration) => {
    Vue.prototype.$messaging.useServiceWorker(registration)
  }).catch(err => {
    console.log(err)
  })

然后在你的App.vue中,将这段代码添加到创建的()函数中

created() {
    var config = {
        apiKey: <API_KEY>,
        authDomain: <DOMAIN>,
        databaseURL: <DATABASE_URL>,
        projectId: <PROJECT_ID>,
        storageBucket: <STORAGE_BUCKET>,
        messagingSenderId: <SENDER_ID>
    };
    firebase.initializeApp(config);
    const messaging = firebase.messaging();

    messaging
    .requestPermission()
    .then(() => firebase.messaging().getToken())
    .then((token) => {
        console.log(token) // Receiver Token to use in the notification
    })
    .catch(function(err) {
        console.log("Unable to get permission to notify.", err);
    });

    messaging.onMessage(function(payload) {
    console.log("Message received. ", payload);
    // ...
    });
}
const admin = require("firebase-admin")

var serviceAccount = require("./certificate.json");

admin.initializeApp({
    credential: admin.credential.cert(serviceAccount),
});
const Messaging = admin.messaging()

var payload = {
    webpush: {
        notification: {
            title: "Notification title",
            body: "Notification info",
            icon: 'http://i.imgur.com/image.png',
            click_action: "http://yoursite.com/redirectPage" 
        },
    },
    topic: "Doente_" + patient.Username
};

return Messaging.send(payload)

然后,在邮递员中,您执行以下请求

POST /v1/projects/interact-f1032/messages:send HTTP/1.1
Host: fcm.googleapis.com
Authorization: Bearer <SENDER_TOKEN>
Content-Type: application/json

{
  "message":{
    "token" : The token that was in the console log,
    "notification" : {
      "body" : "This is an FCM notification message!",
      "title" : "FCM Message"
      }
   }
}

在后端,使用以下代码,其中文件certificate.json在Firebase仪表板中(https://firebase.google.com/docs/cloud-messaging/js/client-生成一对密钥)

const {google} = require('googleapis');

function getAccessToken() {
  return new Promise(function(resolve, reject) {
    var key = require('./certificate.json');
    var jwtClient = new google.auth.JWT(
      key.client_email,
      null,
      key.private_key,
      ["https://www.googleapis.com/auth/firebase", 
      "https://www.googleapis.com/auth/cloud-platform"],
      null
    );
    jwtClient.authorize(function(err, tokens) {
      if (err) {
        reject(err);
        return;
      }
      resolve(tokens.access_token);
    });
  });
}

getAccessToken().then(senderToken => console.log(senderToken))

senderToken在授权标头上用于发送通知

 类似资料:
  • 我正在尝试使用FireBase云消息传递。我正在接收令牌,但它没有从控制台收到任何通知。这是我的舱单: 我的代码与示例中的代码几乎相同: 我在这里检查了一个问题,Firebase云消息通知未被设备接收,但仍然无法工作。

  • 添加了从FCM到Facebook的API密钥 但从FB控制台“推送活动设置验证”到有效的“您的设备令牌”-不工作 错误: 无法验证用于发送消息的发件人帐户。这可能是由于无效的项目号作为密钥发送,或者密钥是有效的,但禁用了FCM服务,或者我们的服务器没有在服务器密钥IP中列入白名单。 是什么导致了这些问题?有什么日志我可以看吗?

  • 我正在尝试让Firebase云消息传递正常工作。我现在只是想做个测试。我所做的就是这篇文章的全部内容: https://firebase.google.com/docs/cloud-messaging/js/client?authuser=0#retrieve-the-current-registration-token 然后在最后你会看到这个: 然后我复制这个,并通过访问Firebase(网站)

  • 我正试图将FCM与SNS整合。我在这个答案中读到设置应该与GCM相同。我设法创建了一个FCM应用程序,可以向android设备发送消息。当应用程序在后台时,设备在托盘中接收通知,或当应用程序在前台时打印接收的消息。我正试图整合它现在到SNS,但我似乎不能使它工作,没有任何错误信息。

  • Firebase云消息传递密钥在以下两个位置是否相同?1) 火基控制台- 我的项目在两个地方都有不同的键。迁移到FCM后,我无法向服务器发送任何消息

  • 我必须在SpringJava中为多层架构制作一个RESTAPI,其中需要为Firebase云消息传递(FCM)构建DAO、控制器和服务管理器,以向android应用程序发送推送通知消息,但我无法在Java中配置服务器以向设备发送通知。我怎么能?